Question

我正在VueJS中创建一个递归的组件树。我在项目组件中有这种行：

<item v-for="i in items" v-model="i"></item>

它运作正常，但Vue正在给我这个警告：

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

我对此警告感到困惑，因为我的应用似乎工作正常 - 我可以在项目树中添加，移动和删除节点就好了。这个错误信息是什么 - 我应该担心吗？

Answer 1

错误是对i组件的v-model传递的参数<item>的更改不会反映在items属性中。这是因为i只是项目的别名而不是实际项目。

如果您在每个items组件的模型发生更改时不需要<item>进行更新，那么您无需担心。但您可能希望items更新，因为您将项目中的每个元素作为v-model传递。

为了正确引用每个项目并避免此警告，您可以使用索引访问items数组中的每个元素。像这样：

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

Answer 2

您应该担心，因为您无法在其他环境中使用i绑定到模型，例如观察者或过滤器等。

这不是一个好的做法，警告是有效的。

请考虑在data中创建一个数组，并将您的数据作为对象添加到其中，然后执行v-for和绑定。它更安全。

之前我有类似的警告，我无法处理变量，因为它们被视为本地警告