具有动态v模型的VueJS网格多重复选框

Question

我正在尝试使用动态v-model创建一个可选复选框网格。

我认为它不需要太多解释。

以下是展示此问题的jsfiddle。

<div class="selectable-blocks-provider-bid">
    <div class="day-item" v-for="(day, key) in days">
        {{ day }}
        <div class="hour-item" v-for="(hour, keyHour) in hours">
            {{ hour }}
            <input type="checkbox" v-model="available_block_for_bids[key]" :value="key+'-'+keyHour">
         </div>
    </div>
</div>

const app = new Vue({
    el: "#app",
    data: {
    days: {
      0: "Sunday",
      1: "Monday",
      3: "Wednesday",
      5: "Friday",
      6: "Saturday",
    },
    hours: {
      0:"Early Morning",
      1:"Late Morning",
      2:"Early Afternoon",
      3:"Late Afternoon",
      4:"Early Evening",
      5:"Late Evening",
    },
    available_block_for_bids: {},
  },
  created() {
      let vm = this;
    _.each(vm.days, (item, key) => {

      vm.available_block_for_bids[key] = [];

    });
  }


});

Answer 1

created() {
  let vm = this;
  _.each(vm.days, (item, key) => {

    vm.$set(vm.available_block_for_bids, key, []);

  });
}