如何禁止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為了清楚）。