时间戳

首页 > 解决方案 > Vuejs Bind 1 复选框与多个

vue.js - Vuejs Bind 1 复选框与多个

问题描述

如何将 Quater 与每个月绑定？我尝试过使用观察者，但随后我必须搜索每个元素等

Codepen 演示

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

标签： vue.jsvuejs2vuetify.js

解决方案

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 演示

推荐阅读