Vue.js 多维数组嵌套v-for中的v-model

您好，我想创建一个包含所选月份天数的表，您可以在其中添加员工并标记要分配给该员工的膳食

我就快到了，我可以在桌子上加一行，并按天标记饭菜，但是当添加第二行时，会标记相同的饭菜，如果我在一行中标记一顿饭，它会标记所有的行，那么所有的饭菜都会按天装订

下面是代码和一个JSFIDLE

Html

挑一个月
{{month}}


添加员工

为员工标记膳食

名称
月日
{{day.date}
B
L
D

Vue

newvue({
el:“应用程序”，
数据：{
月份：''，
名单：[
]
},
计算：{
日历（）{
let selected=新日期（本月）
let daysOfMonth=新日期（selected.getFullYear（），selected.getMonth（）+1,0）
let days=[{}]
对于（var i=0；i

---

更改您的

addEmployee

方法以避免指向同一对象：

addEmployee () {
      let cal = []
      cal = JSON.parse(JSON.stringify(this.calendar))
      this.list.push(
        {
          name: '',
          days: cal
        }
      )
 }

---

创建方法调用的更合适方法是

getCalendar

和

let cal=this.getCalendar（）

这是因为所有员工都引用同一个对象

calendar

，您可以深度复制该对象，或者尝试在每一行上共享同一个对象，这意味着在更新一行时，其余的都会更新

计算方法在这里不是正确的工具。我建议您创建一个方法来生成日历对象

methods: {
    createCalander (month) {
      let selected = new Date(month)
      let daysOfMonth = new Date(selected.getFullYear(), selected.getMonth() + 1, 0)
      let days = [{}]
      for (var i = 0; i < daysOfMonth.getDate(); i++) {
        days[i] = {
          date: selected.getFullYear().toString() + '-' + (selected.getMonth() + 1).toString() + '-' + (i + 1).toString(),
          breakfast: false,
          lunch: false,
          dinner: false
        }
      }
      return days
    }
  }
}

既然您没有使用相同的对象，那么这些行将不会一起更新

你的错误是在每一行使用相同的对象

---

谢谢你的帮助，现在我可以单独编辑单元格了。另一个问题是，当我更改标题大小的月份但添加的行保持其大小时，如何调整行的大小而不丢失标记的单元格

addEmployee () {
      let cal = []
      cal = JSON.parse(JSON.stringify(this.calendar))
      this.list.push(
        {
          name: '',
          days: cal
        }
      )
 }

methods: {
    createCalander (month) {
      let selected = new Date(month)
      let daysOfMonth = new Date(selected.getFullYear(), selected.getMonth() + 1, 0)
      let days = [{}]
      for (var i = 0; i < daysOfMonth.getDate(); i++) {
        days[i] = {
          date: selected.getFullYear().toString() + '-' + (selected.getMonth() + 1).toString() + '-' + (i + 1).toString(),
          breakfast: false,
          lunch: false,
          dinner: false
        }
      }
      return days
    }
  }
}

addEmployee () {
      let cal = []
      cal = this.getCalander(this.month)
      this.list.push(
        {
          name: '',
          days: cal
        }
      )
    }