v-модель во вложенном v-для многомерного массива

Question

Здравствуйте, я хочу создать таблицу с указанием дней выбранного месяца, в которую вы можете добавить сотрудника и отметить блюда, которые хотите назначить сотруднику.

Я почти там, я могу добавить строку в таблицу и отмечать блюда по дням, но когда добавляется второй ряд, отмечаются те же блюда, все блюда связываются по дням, если я отмечаю еду в ряду, то это отметки для всех строк.

Вот код и jsfiddle

Html

<div id="app">
  <span class="demonstration">Pick a month</span>
  <input type="month" v-model="month">{{month}}<br><br>
  <button @click="addEmployee()">Add a employee</button><br>
  Mark meals for the employee<br>
  <table border="1">
    <thead>
      <tr>
        <th rowspan="3">Name</th>
        <th :colspan="calendar.length*3">days of the month</th>
      </tr>
      <tr>
        <th colspan="3" v-for="day in calendar">{{day.date}}</th>
      </tr>
      <tr>
        <template v-for="c in calendar">
          <th>b</th>
          <th>l</th>
          <th>d</th>
        </template>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, indexItem) in list" :key="indexItem">
        <td>
          <input type="text" v-model="item.name">
        </td>
        <template v-for="(day, indexDay) in item.days">
          <td>
            <input type="checkbox"  v-model="item.days[indexDay].breakfast">
          </td>
          <td>
            <input type="checkbox"  v-model="item.days[indexDay].lunch">
          </td>
          <td>
            <input type="checkbox"  v-model="item.days[indexDay].dinner">
          </td>
        </template>
      </tr>
    </tbody>
  </table>
</div>

1010 * Вю *

new Vue({
  el: "#app",
  data: {
    month: '',
    list: [

    ]
  },

  computed: {
    calendar () {
      let selected = new Date(this.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
    }
  },
  methods: {
    addEmployee () {
      let cal = []
      cal = this.calendar
      this.list.push(
        {
          name: '',
          days: cal
        }
      )
    }
  }
})

https://jsfiddle.net/patogalarzar/v8h0knt7/

Answer 1

это потому, что все сотрудники ссылаются на один и тот же объект calendar, вы можете глубоко скопировать объект или попробовать таким образом

Answer 2

Вы разделяете один и тот же объект в каждой строке, что означает, что при обновлении одной строки обновляются и все остальные.

Вычисленный метод не является правильным инструментом здесь. Я предлагаю вам создать метод для создания объекта календаря.

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

Теперь вы можете создать вычисляемое свойство, используя этот метод, передав this.month.

При добавлении сотрудников вы будете использовать новый метод для создания списка.

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

Теперь, когда вы не используете один и тот же объект, строки не будут обновляться вместе.

Ваша ошибка заключалась в том, чтобы использовать один и тот же объект в каждой строке.

Я обновил jsfiddle

Answer 3

Измените метод addEmployee, чтобы избежать указания на тот же объект:

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

Более правильный способ создания вызова метода getCalendar и let cal = this.getCalendar()