Vuetify动态生成CRUD表单时v-model绑定编辑数据不填充问题求解

核心原因 #

你当前的写法不符合Vue的v-model绑定规则：v-model需要绑定到响应式数据引用，而你写的:v-model="'editedItem.'+f.name"实际是把v-model绑定到了一段字符串文本上，并没有和editedItem的对应属性建立关联，自然无法实现自动填充和双向绑定。

正确实现步骤 #

1. 修改动态字段的绑定语法
   将原来的:v-model="'editedItem.'+f.name"直接替换为：

v-model="editedItem[f.name]"

该写法使用了JS对象的动态属性访问语法，和你硬编码的v-model="editedItem.calories"效果完全一致（后者本质是v-model="editedItem['calories']"的语法糖），不需要额外设置计算属性即可正常实现回显和双向绑定。

2. 可选：保证动态字段的响应性
   如果你的字段配置是动态拉取、editedItem初始化时没有提前声明所有字段，需要在初始化时遍历字段配置，给editedItem提前声明所有响应式属性，避免Vue无法监听到新增属性的变化：

// 初始化editedItem的示例代码
this.editedItem = {}
// fields是你动态生成表单的字段配置数组
this.fields.forEach(field => {
  this.$set(this.editedItem, field.name, '')
})

以上调整完成后，动态生成的表单字段就可以和硬编码字段一样正常工作了。

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