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 /文本框中更新。之后，如果我在另一个文本框中更新，则会发生挂起的更新操作。

如何解决此问题？

Answer 1

这里有几个问题。

首先，当您通过 index 更改click处理程序时，您在isNaN("")处理程序中进行了Vue cannot detect the change。在Vue中修改数组时，这是一个常见的警告。

其次，代码中存在一个错误，如果您删除文本框，false将解析为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) } } })。这在许多地方都是documented。我在下面的代码中为此实现了一个非常天真的修复，但你应该寻找更强大的解决方案。

<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)

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

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- CSS -->
<style>#videoDiv{display:none;}</style>

<!-- jQuery -->
<script>
$(function(){
    $(".clickForVideo").click(function(){
        $("#videoDiv").show();
    });
    $(document).click(function(event){
        if ($('#videoDiv').is(':visible')) {    
        /*  tried replacing above line with this line according to stackoverflow - also failed
        if(!$(event.target).closest('#videodiv').length) {  */
            $('#videoDiv').hide(); <!--Reference 1-->
        }
    });
});
</script></head>

<!-- HTML -->
<body>
<div id="videoDiv"><iframe src="https://www.youtube.com/embed/S28Zux62a_0">
</iframe></div>
<div class="clickForVideo">Click me to show video</div>
</body></html>

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

1 个答案: