v-for循环中使用‘v-model‘ directives cannot update the iteration variable itself

爱宇阳2024-09-15 8:17

这个错误通常是因为在 v-for 指令中，试图直接修改迭代变量本身，而不是修改变量的属性。Vue 不允许直接更改 v-for 中的迭代变量，因为这些变量是基于父作用域的，而直接修改它们不会触发 Vue 的响应式更新机制。

要解决这个问题，应该修改对象的属性，而不是迭代变量本身。例如，如果你有这样的代码：

vue 复制代码

<div v-for="item in items" :key="item.id">
  <input v-model="item" />
</div>

这是不允许的，因为你直接尝试修改 item。你可以这样更改：

vue 复制代码

<div v-for="item in items" :key="item.id">
  <input v-model="item.value" />
</div>

假设 item 是一个对象，并且你想更新它的 value 属性，这样修改对象的属性才会触发响应式更新。

如果 item 不是对象，而是一个原始值（如字符串或数字），你可能需要将 items 转换为对象列表，或者手动处理输入的变化，像这样：

vue 复制代码

<div v-for="(item, index) in items" :key="index">
  <input v-model="items[index]" />
</div>

这样，修改的是 items 数组中的值，而不是迭代变量本身。