Vuejs Bind 1 复选框与多个

Question

如何将 Quater 与每个月绑定？我尝试过使用 watcher 但我必须搜索每个元素等

Codepen demo

<div id="app">
 <v-card>
<v-card-text class="grey lighten-3">
  <v-radio-group row class="mt-0" hide-details>
    <v-checkbox label="Q1" v-model="check_q1" hide-details class="mt-0"></v-checkbox>
    <v-checkbox label="Q2" v-model="check_q2" hide-details class="mt-0"></v-checkbox>
    <v-checkbox label="Q3" v-model="check_q3" hide-details class="mt-0"></v-checkbox>
    <v-checkbox label="Q4" v-model="check_q4" hide-details class="mt-0"></v-checkbox>
  </v-radio-group>
  <hr>
  <v-checkbox v-for="(month, index) in months" :key="index" hide-details class="mt-0" v-model="selected_months"  :label="month" :value="index"></v-checkbox>
</v-card-text>

Answer 1

有一个简单的解决方案是使用字典并在用户检查季度复选框时收听change 事件

methods: {
 toggleValue (value, quarter) {
      console.log(this.selected_months)
      var mapping = {
        'q1': [0, 1, 2],
        'q2': [3, 4, 5],
        'q3': [6, 7, 8],
        'q4': [9, 10, 11],
      }
      var months = mapping[quarter]
      if (!value) {
        this.selected_months = this.selected_months.filter(item => !months.includes(item))
      } else {
        this.selected_months = this.selected_months.concat(months)
        // make array unique
        this.selected_months = this.selected_months.filter((it, i, ar) => ar.indexOf(it) === i);
      }
      console.log(this.selected_months)
    }
}

在模板代码中：

  <v-radio-group row class="mt-0" hide-details>
    <v-checkbox label="Q1" v-model="check_q1" hide-details class="mt-0" @change="toggleValue($event, 'q1')"></v-checkbox>
    <v-checkbox label="Q2" v-model="check_q2" hide-details class="mt-0"
                @change="toggleValue($event, 'q2')"></v-checkbox>
    <v-checkbox label="Q3" v-model="check_q3" hide-details class="mt-0"
                @change="toggleValue($event, 'q3')"></v-checkbox>
    <v-checkbox label="Q4" v-model="check_q4" hide-details class="mt-0"
                @change="toggleValue($event, 'q4')"></v-checkbox>
  </v-radio-group>

您可以将映射更改为复选框的值：

var mapping = {
  'q1': ['January', 'February', 'March'],
  'q2': ['April', 'May', 'June'],
  'q3': ['July', 'August', 'September'],
  'q4': ['October', 'November', 'December'],
}

Codepen demo