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>

Vue

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

更改您的addEmployee方法以避免指向同一对象：

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

创建方法调用getCalendar和let cal = this.getCalendar()的更正确的方法

Answer 2

这是因为所有员工都引用相同的对象a<-data[,((colSums(is.na(data)) == nrow(data))==T)] names(a)，因此您可以深度复制该对象或尝试使用this way

Answer 3

您在每一行上共享同一对象，这意味着当更新一行时，其余所有对象也将更新。

计算方法不是此处的正确工具。我建议您创建一种方法来生成日历对象。

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

现在您不使用同一对象，这些行将不会一起更新。

您的错误是在每一行上使用相同的对象。

I've updated the jsfiddle

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

3 个答案: