I have a code that calculates the amount of coins from an array. This code helps me determine how many items I can buy from a table with a given order. In the code, orderSize is being mutated in order to get the result. However, when I add an input field for manually entering the order size, the mutation causes the input text to change (if it is higher than the amount of the first item). I do not want the text to change. I have tried creating another variable that equals orderSize, but the same issue persists. How can I prevent the input text from being mutated? (Try entering any value higher than 100, and the text will change) (The array is coming from an outside source and I cannot control it) (If I do not mutate that variable, I will not be able to achieve my main goal of calculating the coin amount)
new Vue({
el: '#app',
data: {
orderSize : null,
},
computed: {
calculateOrder () {
var coinArray = [["100","1"],["200","2"],["300","3"],["400","4"],
["500","5"],["600","6"]] ;
var sum = 0
var sum1 = 0
var i= 0
for (i = 0; i < coinArray.length; i++){
if (coinArray[i][0]*coinArray[i][1] < this.orderSize) {
sum1 += parseFloat(coinArray[i][1]);
sum += coinArray[i][0]*coinArray[i][1];
this.orderSize -= coinArray[i][0]*coinArray[i][1] ;
} else {
return sum1+this.orderSize/parseFloat(coinArray[i][0]);
}
}
},
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="orderSize" placeholder="Order $">
<p>{{ calculateOrder }}</p>
</div>