对象数组模型绑定的复选框组件

Question

我有一周中的几天作为复选框，看起来像下面的可切换按钮：

按钮被点击时会切换ON和OFF（复选框为checked）

注意：下面的代码不起作用，点击按钮时会给出undefined

<template>
  <label 
    v-for="(day, index) in days"
    :key="index"
    class="flex items-center justify-center border border-gray-500 rounded cursor-pointer py-2"
    :class="day.state ? 'text-white bg-gray-500' : 'text-gray-500 bg-white'"
    :for="`checked-${day.index}`"
  >
    <input
      :id="`checked-${ day.index }`"
      type="checkbox"
      class="absolute opacity-0 w-0 h-0"
      @click="check"
      v-model="selectedDays"
      :value="index"
    />
      {{ day.label }}
    </label> 
</template>

<script>
export default {
  inheritAttrs: false,
    data() {
    return {
      days: {
        Sunday: {
          label: 'Sun',
          state: true
        },
        Monday:  {
          label: 'Mon',
          state: false
        },
        Tuesday:  {
          label: 'Tue',
          state: false
        },
        Wednesday:  {
          label: 'Wed',
          state: false
        },
        Thursday:  {
          label: 'Thu',
          state: false
        },
        Friday:  {
          label: 'Fri',
          state: false
        },
        Saturday:  {
          label: 'Sat',
          state: false
        }
      },
      selectedDays: []
    }
  },
  methods: {
    clickToggle() {
      this.toggle(!this.state)
    },
    toggle(state) {
      this.state = state
    },
    check() {
      console.log(this.selectedDays);
    }
  }
}
</script>

我的问题：

• 如何将复选框绑定到一个或多个模型，以便在单击复选框时切换该模型状态？
• 我应该使用selectedDays 方法还是days 可以自己处理这一切？

Answer 1

不需要任何事件。看我的例子，我只使用 v-model 指令。

对于selectedDays，更好的方法是计算属性。这是一种最佳做法，而且更容易。

<template>
  <div>
    <label
      v-for="(day, index) in days"
      :key="index"
      class="flex items-center justify-center border border-gray-500 rounded cursor-pointer py-2"
      :class="day.state ? 'text-white bg-gray-500' : 'text-gray-500 bg-white'"
    >
      <input type="checkbox" v-model="day.state" />
      {{ day.label }}
    </label>
    <div>{{ selectedDays }}</div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  data() {
    return {
      days: {
        Sunday: { label: 'Sun', state: true },
        Monday: { label: 'Mon', state: false },
        Tuesday: { label: 'Tue', state: false },
        Wednesday: { label: 'Wed', state: false },
        Thursday: { label: 'Thu', state: false },
        Friday: { label: 'Fri', state: false },
        Saturday: { label: 'Sat', state: false },
      },
    };
  },
  computed: {
    selectedDays() {
      let result = [];
      for (let key in this.days) {
        if (this.days[key].state) {
          result.push(this.days[key]);
        }
      }
      return result;
    },
  },
};
</script>