Prepare for a thorough cross-referencing session

Question

Prepare for a thorough cross-referencing session

In my attempt to create a tool with 3 inputs that are interdependent - "Earn %", "Earn $" and "Own Price".

Initially, the default value for "Earn percentage" is set at "10", making the initial calculation function as intended. Changing this one value automatically adjusts the other two because there are no circular references: https://jsfiddle.net/2m971kur/2/

const app = new Vue({
  el: '#app',
  data: {
        exVAT: 1500,
        retailPrice: 2900,
        earnPercentage: 10
  },
    computed: {
        incVAT() {
            return this.exVAT * 1.25;
        },
        ownPrice() {
            return this.exVAT + (this.exVAT * (this.earnPercentage / 100));
        },
        earnAmount() {
            return this.ownPrice - this.exVAT;
        }
    }
})

However...
When attempting to introduce circular references, my code encounters issues: https://jsfiddle.net/xrwykvg5/

const app = new Vue({
  el: '#app',
  data: {
        exVAT: 1500,
        retailPrice: 2900,
        earnPercentage: 10,
        ownPrice: 0,
        earnAmount: 0
  },
    watch: {
        earnPercentage() {
            this.earnAmount = this.exVAT * (this.earnPercentage / 100);
            this.ownPrice = this.exVAT + this.earnPercentage;
        },
        ownPrice() {
            this.earnAmount = this.ownPrice - this.exVAT;
            this.earnPercentage = 100 / (this.ownPrice / this.exVAT);
        },
        earnAmount() {
            this.ownPrice = this.exVAT + this.earnAmount;
            this.earnPercentage = (this.ownPrice / this.exVAT) * 100;
        }
    }
})

How can I resolve this issue?

While the example was created using Vue.js, showcasing a simple demonstration of the problem, my actual code is in Angular 2.

javascript angularjs vue.js

Answer 1

Answer №1

Trust Roy J's skills to create a clean and concise solution with computed properties.

Admittedly, I took the easy way out. I lacked the courage to fully comprehend your logic and opted for a simple method-based approach:

const app3 = new Vue({
  el: '#app',
  data: {
    incVAT: 0,
    exVAT: 1500,
    retailPrice: 2900,
    earnPercentage: 10,
    ownPrice: 0,
    earnAmount: 0
  },
  methods: {
    changeEarnPercentage(earnPercentage) {
      this.earnPercentage = Number(earnPercentage);
      this.earnAmount = this.exVAT * (this.earnPercentage / 100);
      this.ownPrice = this.exVAT + this.earnPercentage;
    },
    changeOwnPrice(ownPrice) {
      this.ownPrice = Number(ownPrice);
      this.earnAmount = this.ownPrice - this.exVAT;
      this.earnPercentage = 100 / (this.ownPrice / this.exVAT);
    },
    changeEarnAmount(earnAmount) {
      this.earnAmount = Number(earnAmount);
      this.ownPrice = this.exVAT + this.earnAmount;
      this.earnPercentage = (this.ownPrice / this.exVAT) * 100;
    }
  }
})

#app div {
  float: left;
  margin: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div>
    Inc. VAT: <br>{{ incVAT }}
  </div>
  <div>
    Ex. VAT: <br>{{ exVAT }}
  </div>
  <div>
    % earned: <br>
    <input type="text" :value="earnPercentage" @input="changeEarnPercentage($event.target.value)" />
  </div>
  <div>
    $ earned: <br><input type="text" :value="earnAmount" @input="changeEarnAmount($event.target.value)" />
  </div>
  <div>
    Own price: <br><input type="text" :value="ownPrice" @input="changeOwnPrice($event.target.value)" />
  </div>
  <div>
    Retail: <br>{{ retailPrice }}
  </div>
</div>

All in all, not too shabby.

It's worth noting that I used some Number() conversions to avoid treating numbers as strings. Additionally, utilizing an <input type="number"> would be a wise choice.

Answer 2

Trust Roy J's skills to create a clean and concise solution with computed properties.

Admittedly, I took the easy way out. I lacked the courage to fully comprehend your logic and opted for a simple method-based approach:

const app3 = new Vue({
  el: '#app',
  data: {
    incVAT: 0,
    exVAT: 1500,
    retailPrice: 2900,
    earnPercentage: 10,
    ownPrice: 0,
    earnAmount: 0
  },
  methods: {
    changeEarnPercentage(earnPercentage) {
      this.earnPercentage = Number(earnPercentage);
      this.earnAmount = this.exVAT * (this.earnPercentage / 100);
      this.ownPrice = this.exVAT + this.earnPercentage;
    },
    changeOwnPrice(ownPrice) {
      this.ownPrice = Number(ownPrice);
      this.earnAmount = this.ownPrice - this.exVAT;
      this.earnPercentage = 100 / (this.ownPrice / this.exVAT);
    },
    changeEarnAmount(earnAmount) {
      this.earnAmount = Number(earnAmount);
      this.ownPrice = this.exVAT + this.earnAmount;
      this.earnPercentage = (this.ownPrice / this.exVAT) * 100;
    }
  }
})

#app div {
  float: left;
  margin: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div>
    Inc. VAT: <br>{{ incVAT }}
  </div>
  <div>
    Ex. VAT: <br>{{ exVAT }}
  </div>
  <div>
    % earned: <br>
    <input type="text" :value="earnPercentage" @input="changeEarnPercentage($event.target.value)" />
  </div>
  <div>
    $ earned: <br><input type="text" :value="earnAmount" @input="changeEarnAmount($event.target.value)" />
  </div>
  <div>
    Own price: <br><input type="text" :value="ownPrice" @input="changeOwnPrice($event.target.value)" />
  </div>
  <div>
    Retail: <br>{{ retailPrice }}
  </div>
</div>

All in all, not too shabby.

It's worth noting that I used some Number() conversions to avoid treating numbers as strings. Additionally, utilizing an <input type="number"> would be a wise choice.

Answer 3

Answer №2

In order to properly use v-model on your computed values, it is essential for them to have setters defined. The set function should essentially be the inverse of the get function to ensure that the input and output align correctly. This issue can be observed in Cobaltway's example where slight changes in Own Price result in significant jumps in % Earned, showcasing inconsistent results due to improper formulation.

this.ownPrice - this.exVAT;

For instance, for the earnAmount, with the get value above, the corresponding set function would be:

this.ownPrice = Number(newValue) + this.exVAT;

Note that a conversion from text to number is required here. By setting up ownPrice similarly (and utilizing v-model.lazy), you can create a structured approach as shown below:

const app3 = new Vue({
  el: '#app',
  data: {
    exVAT: 1500,
    retailPrice: 2900,
    earnPercentage: 10
  },
  computed: {
    incVAT: function() {
      return this.exVAT * 1.25;
    },
    earnAmount: {
      get: function() {
        return this.ownPrice - this.exVAT;
      },
      set: function(newValue) {
        this.ownPrice = Number(newValue) + this.exVAT;
      }
    },
    ownPrice: {
      get: function() {
        return this.exVAT + (this.exVAT * (this.earnPercentage / 100));
      },
      set(newValue) {
        this.earnPercentage = 100 * (Number(newValue) - this.exVAT) / this.exVAT;
      }
    }
  }
});

#app div {
  float: left;
  margin: 1em;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div>
    Inc. VAT:
    <br>{{ incVAT }}
  </div>
  <div>
    Ex. VAT:
    <br>{{ exVAT }}
  </div>
  <div>
    % earned:
    <br>
    <input type="text" v-model.lazy="earnPercentage" />
  </div>
  <div>
    $ earned:
    <br>
    <input type="text" v-model.lazy="earnAmount" />
  </div>
  <div>
    Own price:
    <br>
    <input type="text" v-model.lazy="ownPrice" />
  </div>
  <div>
    Retail:
    <br>{{ retailPrice }}
  </div>
</div>

Answer 4

In order to properly use v-model on your computed values, it is essential for them to have setters defined. The set function should essentially be the inverse of the get function to ensure that the input and output align correctly. This issue can be observed in Cobaltway's example where slight changes in Own Price result in significant jumps in % Earned, showcasing inconsistent results due to improper formulation.

this.ownPrice - this.exVAT;

For instance, for the earnAmount, with the get value above, the corresponding set function would be:

this.ownPrice = Number(newValue) + this.exVAT;

Note that a conversion from text to number is required here. By setting up ownPrice similarly (and utilizing v-model.lazy), you can create a structured approach as shown below:

const app3 = new Vue({
  el: '#app',
  data: {
    exVAT: 1500,
    retailPrice: 2900,
    earnPercentage: 10
  },
  computed: {
    incVAT: function() {
      return this.exVAT * 1.25;
    },
    earnAmount: {
      get: function() {
        return this.ownPrice - this.exVAT;
      },
      set: function(newValue) {
        this.ownPrice = Number(newValue) + this.exVAT;
      }
    },
    ownPrice: {
      get: function() {
        return this.exVAT + (this.exVAT * (this.earnPercentage / 100));
      },
      set(newValue) {
        this.earnPercentage = 100 * (Number(newValue) - this.exVAT) / this.exVAT;
      }
    }
  }
});

#app div {
  float: left;
  margin: 1em;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div>
    Inc. VAT:
    <br>{{ incVAT }}
  </div>
  <div>
    Ex. VAT:
    <br>{{ exVAT }}
  </div>
  <div>
    % earned:
    <br>
    <input type="text" v-model.lazy="earnPercentage" />
  </div>
  <div>
    $ earned:
    <br>
    <input type="text" v-model.lazy="earnAmount" />
  </div>
  <div>
    Own price:
    <br>
    <input type="text" v-model.lazy="ownPrice" />
  </div>
  <div>
    Retail:
    <br>{{ retailPrice }}
  </div>
</div>

Prepare for a thorough cross-referencing session

Answer №1

Answer №2

Similar questions

Tips for customizing the appearance of a React-Table header when sorting data

Instructions on converting XML data obtained from an AJAX call into a downloadable file

The most efficient method for handling a vast amount of data in NodeJS

The jqGrid displays a plus sign even when the subgrid is empty while using XML

Converting milliseconds into a formatted DateTime using AngularJS: A step-by-step guide

Tips for creating a stylish scrollbar in a React Material-Table interface

Find and return a specific record from MongoDB if it matches the exact value

Eliminate operation in React with the help of Axios

The Jquery .clone() function presents issues in Internet Explorer and Chrome browsers, failing to perform as expected

Exploring the depths of JSON using @attributes and @association in the realm of JavaScript and AngularJS

Encountering difficulties with image processing on a web page

Steps to display page content only after running Java code in JSP

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Customize vue.config.js and webpack 4: modify the 'exclude' or 'include' parameters of a rule

Steps to trigger an AngularJS modal window when the URL contains a query string

Provide a unique <li> attribute for the JavaScript function to utilize

Validating checkboxes using HTML5

Error occurred while making a request in React using Axios: TypeError - Unable to retrieve the 'token' property as it is undefined

Executing Two Distinct JQuery Api Requests

Demonstration of using .queue() and .dequeue() in relation to $.queue() and $.dequeue()