VueJS：如何在数组的 for 循环中使用绑定值？

Question

我有一个字符串数组：

\n

myList: [\'First item\', \'Second item\']\n

\n

我想添加第三个，甚至更多。我有一个将空字符串推入数组的方法：

\n

this.myList.push(\'\')\n

\n

（在 Vue 对象上使用 .push 是可以的）

\n

现在看起来像这样：

\n

[\'First item\', \'Second item\', \'\']\n

\n

我现在可以编辑。然而，it\xe2\x80\x99s 未绑定到数组。当添加另一个项目时，该值将丢失并返回到空字符串。

\n

\r\n

\r\n

myList: [\'First item\', \'Second item\']\n

\r\n

this.myList.push(\'\')\n

\r\n

\r\n

\r\n

\n

尝试了以下方法：

\n

如上：

\n

<input\n  type="text"\n  :value="listItem"\n  :key="index"\n/>\n

\n

没有密钥，相同：

\n

<input\n  type="text"\n  :value="listItem"\n/>\n

\n

使用（不正确的）绑定，\xe2\x80\x99t 不会回显值：

\n

<input\n  type="text"\n  :value="myList[index]"\n/>\n

\n

使用v-bind：

\n

<input\n  type="text"\n  v-bind:value="listItem"\n/>\n

\n

还有一把钥匙：

\n

<input\n  type="text"\n  v-bind:value="listItem"\n  v-bind:key="index"\n/>\n

\n

我\xe2\x80\x99m肯定我\xe2\x80\x99m以错误的方式处理这个问题。希望您能看到我\xe2\x80\x99m 试图实现的行为。

\n

---

\n

更新刚刚尝试使用v-model，但我收到此错误：

\n

\n

您将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组，因为写入别名就像修改函数局部变量一样。考虑使用对象数组并在对象属性上使用 v-model。

\n

\n

拥有一组具有一个值的对象可能更容易吗？

\n

Answer 1

您应该使用 v-model 在输入上进行 2 路绑定，并且必须使用 myList[index] 因为 v-bind 指令需要属性值而不是 v-for 别名（如 listItem）。尝试这个：

\n\n

\r\n

\r\n

var app = new Vue({\r\n  el: \'#app\',\r\n  data: function() {\r\n    return {\r\n      myList: [\'First item\', \'Second item\']\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    remove(index) {\r\n      Vue.delete(this.myList, index)\r\n    },\r\n    add(listItem) {\r\n      this.myList.push(\'\')\r\n    }\r\n  }\r\n})

\r\n

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>\r\n<div id="app">\r\n  <p v-for="(listItem, index) in myList" class="my-2 field" :key="index">\r\n    {{myList[index]}}\r\n    <input\r\n      type="text"\r\n      v-model="myList[index]"\r\n    />\r\n    <button @click.prevent="remove(index)">\xe2\x9c\x95</button>\r\n  </p>\r\n  <p>\r\n    <button @click.prevent="add()">Add</button>\r\n  </p>\r\n</div>

\r\n

\r\n

\r\n

\n