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

When a Bootstrap row has a set maximum height, it continues to occupy space even when its content overflows

"Learn how to add up elements in an array based on their unique IDs and generate a new array using

Is there a glitch in JavaScript when comparing dates?

What is the best way to verify the accuracy of my model when it includes an array property?

Button component in React remains visible until interacted with

Employing global variables in JavaScript files with Vue3

Top method for showcasing animated images (HTML/CSS/JS)

Error Alert: VueRouter has not been properly defined

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

When attempting to compile at runtime without an instance, the act of creating a function constructor can lead to an

Step by step guide on adding content to a div by clicking a button, even after the page has already loaded

Effectively encoding and decoding AJAX and JSON objects with PHP scripting

How to retrieve the context of a .js file using jQuery $.ajax without automatically executing upon receipt

Issue with CSV download box not showing up on Rails version 2.3.11

Manually reloading the page causes issues with AngularJS routing functionality

What could have caused the lack of output from the render function?

Can I retrieve a variable within the watch() function in Vue?

How to efficiently send multiple objects in response to a single GET request with Express and Node.js

Is it possible for ng-options to function independently of a controller?

There seems to be an issue with declaring Gulp Open