Vue v-for场景下v-model修改单条数据所有元素同步更新问题求助

问题根因 #

Array.prototype.fill() 传入引用类型值时，只会将同一个内存地址的引用填充到数组的所有位置。你代码里填充的是同一个对象实例，所以数组中所有元素本质上指向同一个对象，修改任意一个元素的属性，所有元素都会同步更新，这个问题和Vuetify框架无关。

另外你代码还存在一个笔误：this.members.push.apply(this.toddsMembers, emptyArray) 中apply的第一个参数写成了this.toddsMembers，和你前面初始化的this.members不匹配，也会导致赋值异常。

修复方案 #

改用Array.from生成数组，遍历过程中每次返回全新的对象实例，保证每个数组元素都是独立的：

mounted() {
  this.members = []
  let numberofGuests = parseInt(this.$route.params.num, 10)
  let emptyArray = Array.from({length: numberofGuests}, () => ({
    firstName: '',
    lastName: '',
    city: '',
    state: '',
    email: '',
    role: ''
  }))
  // 修正apply的第一个参数为this.members
  this.members.push.apply(this.members, emptyArray)
  // 也可以直接简化为 this.members = emptyArray
},

额外优化建议 #

你当前v-for用index作为key，如果后续有增删数组元素的需求，建议给每个成员对象增加唯一id作为key值，避免Vue列表渲染出现异常。

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