问题

创建3个项目，输入a到第一个输入，b到第二个输入，c到第三个输入。现在删除b文本。项目c也不见了。知道为什么会这样吗？记录功能显示c位于数组的索引1处，因此它应该在那里，但是vue不会呈现该项目。

Answer 1

免责声明：我不知道为什么问题中描述的错误会发生。它可能是导致DOM input values and component private state to become out of sync的v-for。如果您知道此行为的原因，请分享

您是正确的this.list正确更新。您可以通过在输入字段旁边注销名称来查看：

＆＃13;

var demo = new Vue({
  el: '#demo',
  data: {
    items: []
  },
  methods: {
    'manage': function(old, new_) {
      var i = this.items.length;
      while (i--) {
        if (!this.items[i]['name']) {
          this.items.$remove(this.items[i]);
        }
      }
    }
  },
  
  watch: {
    'items': {
      handler: 'manage',
      deep: true
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="demo">
  <div v-for="n in items.length + 1">
    {{ items[n]['name'] }}
    <input v-model="items[n]['name']"/>
  </div>
</div>

＆＃13;

这可以通过manage上的keyup来解决，而不是在列表更改时修复。

以下是如何在keyup上实现类似的行为：

＆＃13;

var demo = new Vue({
  el: '#demo',
  data: {
    items: []
  },
  methods: {
    'manage': function(old, new_) {
      var i = this.items.length;
      while (i--) {
        if (!this.items[i]['name']) {
          this.items.$remove(this.items[i]);
        }
      }
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="demo">
  <div v-for="n in items.length + 1">
    <input v-model="items[n]['name']" @keyup="manage"/>
  </div>
</div>

＆＃13;

此外，您还在使用缩小版的vue。如果您使用的是未经授权的版本，则会看到您的代码提示某些warnings。他们可能会导致意外行为。

Answer 2

我认为你的第三项，即第三项，依赖于第二项。您应该将数据集拆分到循环之外，并使用其他方法处理删除的项目。您循环遍历相同的数据集，因此如果您修改它所显示的一个区域。通过向外部数据集添加/删除项目，您可以删除依赖项。

数组项作为vuejs中的模型

问题

2 个答案: