VueJS：v-for的key用作v-model绑定失效及动态编辑对话框问题

我明白你遇到的困扰了——在循环渲染动态可编辑字段时，直接用editedItem.key绑定v-model根本行不通，因为Vue会把这里的key当成字面量属性名，而不是你循环里的变量。下面是具体的解决方案和修正后的完整代码：

核心问题解析 #

当你需要通过动态变量访问对象属性时，必须使用方括号语法（object[variable]），而不是点语法（object.variable）。点语法只会寻找名为variable的固定属性，方括号则会把变量的实际值作为属性名来访问，这正是你需要的动态绑定逻辑。

修正后的完整代码 #

Template部分 #

<v-dialog v-model="dialog" max-width="500px">
  <v-card>
    <v-card-title>
      <span class="headline">Edit Item</span>
    </v-card-title>
    <v-card-text>
      <v-container grid-list-md>
        <v-layout wrap>
          <!-- 修正v-model绑定，添加唯一key -->
          <v-flex xs12 sm6 md4 v-for="(value, key, index) in editable_fields" :key="index">
            <v-text-field 
              v-model="editedItem[key]" 
              :label="key"
            ></v-text-field>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
      <v-btn color="blue darken-1" flat @click="save_edit">Save</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

Script部分 #

export default {
  props: {
    editable_fields: {
      type: Object,
      // 修正默认值写法，用括号包裹对象避免语法错误
      default: () => ({ name: '', email: '' })
    },
    // 补充对话框状态的props（通常通过v-model传递）
    dialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 深拷贝props字段，避免直接修改props（遵循Vue单向数据流原则）
      editedItem: { ...this.editable_fields }
    }
  },
  methods: {
    close() {
      // 关闭时重置编辑内容
      this.editedItem = { ...this.editable_fields }
      this.$emit('update:dialog', false)
    },
    save_edit() {
      // 把编辑结果传给父组件
      this.$emit('save', this.editedItem)
      this.close()
    }
  }
}

关键修正点说明 #

1. v-model绑定修正：把v-model="editedItem.key"改成v-model="editedItem[key]"，这样就能正确绑定到循环中当前key对应的属性。
2. props默认值修正：原来的default: ()=> {name: '', email: ''}存在语法错误，需要用括号包裹对象：() => ({ name: '', email: '' })，否则函数会返回undefined。
3. 深拷贝editedItem：直接赋值editedItem = this.editable_fields会让两者指向同一个对象，修改时会直接修改props（违反Vue单向数据流规则），所以用扩展运算符{...this.editable_fields}做浅拷贝；如果是嵌套复杂对象，建议用JSON.parse(JSON.stringify(this.editable_fields))实现深拷贝。
4. v-for添加唯一key：Vue要求v-for循环必须有唯一的key，这里用index作为临时方案；如果你的字段名（key）是唯一的，也可以用:key="key"。
5. 移除.native修饰符：Vuetify的按钮组件不需要@click.native，直接用@click即可触发点击事件。

这样修改后，你的动态编辑对话框就能正确绑定每个指定字段，完全实现用户自定义可编辑字段的需求了。

内容的提问来源于stack exchange，提问作者Tarvo Mäesepp