[Vuejs]-V-model in a nested v-for of a multidimensional array

by

0👍

✅

You are sharing the same object on every row, which means when one row is update, all the rest get updated as well.

Computed method is not the right tool here. I suggest you create a method to generate the calendar object. 

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
    }
  }
}

Now you can create the computed property using this method, passing this.month.

On the add employees you would be using the new method to generate the list.

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

Now that you are not using the same object, the rows will not update together.

Your mistake was to use the same object on every row.

I’ve updated the jsfiddle

0👍

Change your addEmployee method to avoid point to same object:

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

More proper way to create a method call getCalendar and let cal = this.getCalendar()

0👍

this is because all employees reference the same object calendar, you can deep copy the object, or try this way

Leave a comment