CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Waqas
Waqas

Reputation: 639

Vuejs Bind 1 checkbox with multiple

How can I bind Quater with each month? I've tried doing using watcher but then I have to search each element etc

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>

Upvotes: 0

Views: 64

Answers (1)

ittus
ittus

Reputation: 22403

There is 1 simple solution is using a dictionary and listen to change event when user checks quarter's checkbox

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

and in template code:

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

You can change the mapping as checbox's values:

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

Codepen demo

Upvotes: 1

Related Questions