数组项作为 Vuejs 中的模型

array items as models in vuejs

本文关键字：模型 Vuejs 数组      更新时间：2023-09-26

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

问题

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

免责声明：我不知道为什么会出现问题中描述的错误。可能是 v-for 导致 DOM 输入值和组件私有状态变得不同步。如果您知道此行为的原因，请分享

您是对的，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 的缩小版本。如果您使用未缩小的版本，您将看到您的代码正在提示一些warnings。它们可能会导致意外行为。

我认为

您的第三项，即第三项输入，与第二项有依赖关系。 您应该在循环之外拆分数据集，并以另一种方法处理已删除的项目。 您循环访问相同的数据集，因此如果您修改它一个区域，它会显示在所有区域中。 通过向外部数据集添加/删除项，可以删除依赖项。

相关文章：