Vue中v-for使用item.field绑定动态v-model无法显示值问题咨询

• 第一：v-for语法书写错误
  你提供的代码里v-for的写法不符合Vue指令规范：
  错误写法：

<div v-for((item,index) in design.components)>

正确的v-for指令需要用=绑定表达式，且表达式放在双引号内，同时必须绑定key属性：

<div v-for="(item, index) in design.components" :key="index">

你的错误写法导致Vue没有正确解析出遍历的item变量，此时item是未定义或者非预期值，item.field自然无法取到正确的属性名，所以data[item.field]绑定失效。
而你用data[design.components[index].field]能正常工作，是因为design是顶层响应式对象，直接通过索引访问数组元素的路径是完全正确的，不受v-for解析错误的影响。

• 第二：design对象存在语法错误
  你定义components数组第三个元素时，单引号未闭合：

{field:'c} // 错误，少了闭合单引号
{field:'c'} // 正确

这个语法错误会导致整个design对象解析失败，也会引发绑定异常，需要先修正。

• 第三：修正后的完整可运行写法

<div v-for="(item, index) in design.components" :key="index">
  <input v-model="data[item.field]" />
</div>

上述写法可以正常实现双向绑定，没有异常。

内容的提问来源于stack exchange，提问作者小小子