mercredi 21 mars 2018

binding checkboxes without v-model in vuejs

I am working a small project in which i am building filters using vuejs and using vuetify for help. I am using one of its component v-checkbox and I want to bind its value without using v-model as to pass the value to a function and manipulate it the value and set it accordingly.

Code :

template :

<v-checkbox
                    v-for="item, itemIndex in listingData"
                    v-if="itemIndex < checkboxCutoff"
                    :key="item.id"
                    class="pb-1"
                    :label="item.name"
                    :value="checkBoxSelected[item.id]"
                    @change="setCheckBoxFilteredValues(item.id)"
                    hide-details></v-checkbox>
            <!--/non grouped items-->

method :

setCheckBoxFilteredValues (item) {
        console.log(item)
        let nextValue = typeof this.checkBoxSelected[item] === 'undefined' || this.checkBoxSelected[item] === null ||
        this.checkBoxSelected[item] === false || this.checkBoxSelected[item] === '' ? item : null
        if (!this.filtersRules[this.listingType].multipleSelect) {
          this.resetCheckBoxSelected()
          this.$refs.checkboxesListing.resetCheckBoxSelected()
        }
        this.$set(this.checkBoxSelected, item, nextValue)
        console.log(this.checkBoxSelected)
        this.fireCheckBoxFilteredValuesToStates({data: this.checkBoxSelected})
      },




Aucun commentaire:

Enregistrer un commentaire