如何禁止Vue中的V模型输入突变

Question

我有一个用于从数组中计算硬币数量的代码，该代码使我可以学习以给定订单可以从表中购买多少商品，在代码中orderSize会发生变化以达到结果，但是当我将输入区域放入手动输入时导致变化的ordersize导致输入文本发生变化（如果它高于第一项的数量），我不希望文本发生变化。 我尝试添加另一个等于orderSize的变量，但同样的事情发生了。 我应该怎么做才能防止输入文本发生变异。 （尝试输入任何高于100的值都会改变）（数组来自外包，我无法控制）（如果我不对该变量进行更改，则我的主要目标是无法实现计算硬币数量）

jsfiddle

 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> 

Answer 1

如果我正确地阅读了此内容，则问题是您正在使用-=修改orderSize ，该大小将显示在输入中。

如果要避免这种情况，请首先将orderSize的值复制到新变量，例如：

// Copy the variable
let size = this.orderSize
for (...){
  if (...) {
    size -= coinArray[i][0]*coinArray[i][1];
  } else {
     return sum1+size/parseFloat(coinArray[i][0]);
  }

（我已删除无关代码和内容if / for为了清楚）。