javascript - 将项目数组作为 vuejs 中的模型

Question

我想提供表单(在 vuejs 中)，在填写前一个输入时添加新输入。应删除已清除的输入。至少必须有一个输入。到目前为止一切顺利，在jsfiddle中得到了这个

问题

创建 3 个项目，第一个输入输入 a，第二个输入输入 b，第三个输入输入 c。现在删除 b 文本。项目c也丢失了。知道为什么吗？日志记录函数显示 c 位于数组的索引 1 处，因此它应该在那里，但 vue 不会渲染该项目。

Answer 1

Disclaimer: I do not know why the bug described in the question occurs. It may be the v-for causing DOM input values and component private state to become out of sync. Please share if you know the cause of this behaviour

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

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

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

可以通过在 keyup 上调用 manage 来修复此问题，而不是在列表更改时调用。

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

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]);
        }
      }
    }
  }
})

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

此外，您正在使用 vue 的缩小版本。如果您使用未缩小的版本，您将看到您的代码提示一些警告。它们可能会导致意外行为。