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的内容）。

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

1 个答案: