javascript - Vue Js 中数据/模型更新延迟

Question

我创建了一个与我当前工作类似的示例。

var App  = new Vue({
  el:'#app',
  data:{
    demoText:'text',
    sections:2,
    sectionData:[0,0]
  },
  methods:{
    changeData:function(){
      for(var i=0;i<this.sections;i++){
        if(isNaN(this.sectionData[i]))
          this.sectionData[i]=0;
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id='app'>
  
  <div v-for="n in sections">
    <input type="text" v-model=sectionData[n-1]>
  </div>
  
  <input type="button" @click="changeData" value="click">
</div>

在此示例中，当我单击按钮时，我检查数据是否为 ​​isNaN ，如果是，则将其更改为零。但是更新后的数据不会立即在 DOM/textbox 中更新。之后，如果我在另一个文本框中进行更新，则会发生挂起的更新操作。

如何解决这个问题？

Answer 1

这里有几个问题。

首先是 Vue cannot detect the change当您按索引更改它时，您正在点击处理程序中进行操作。这是在 Vue 中修改数组时的常见警告。

其次，代码中存在一个错误，如果您清空文本框，isNaN("") 将解析为 false。这是documented在许多地方。我在下面的代码中对此实现了一个非常幼稚的修复，但您应该寻找更强大的解决方案。

var App  = new Vue({
  el:'#app',
  data:{
    demoText:'text',
    sections:2,
    sectionData:[0,0]
  },
  methods:{
    changeData:function(){
      this.sectionData = this.sectionData.map(d => isNaN(parseInt(d,10)) ? 0 : d)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id='app'>
  
  <div v-for="n in sections">
    <input type="text" v-model=sectionData[n-1]>
  </div>
  
  <input type="button" @click="changeData" value="click">
</div>

点击处理程序的另一种替代实现是

for (let i=0; i < this.sectionData.length; i++)
  if (isNaN(parseInt(this.sectionData[i],10)))
    this.sectionData.splice(i, 1, 0)