javascriptvue.jsbooleanv-model

VueJS invert value in v-model


Here my code :

<input
   v-model="comb.inactive"
   type="checkbox"
   @click="setInactive(comb.id_base_product_combination)"
>

I need to apply the invert of the comb.inactive on the v-model.

Here what i tried :

<input
    v-model="comb.inactive == 1 ? 0 : 1"
    type="checkbox"
    @click="setInactive(comb.id_base_product_combination)"
>



<input
    v-model="comb.inactive == 1 ? false : true"
    type="checkbox"
    @click="setInactive(comb.id_base_product_combination)"
>

Do you have others ideas ?


Solution

  • You should do the following:

    <input
       v-model="comb.inactive"
       type="checkbox"
       @click="setInactive(comb.id_base_product_combination)"
    >
    
    mounted(){
          this.comb['inactive'] = !(this.comb['inactive']);
    }
    

    For better practice, you can use computed:

    <input
       v-model="checkedItem"
       type="checkbox"
       @click="setInactive(comb.id_base_product_combination)"
    >
    
    computed: {
          checkedItem: {
            get: function () {
              return !this.comb['inactive'];
            },
            set: function (newVal) {
              console.log("set as you want")
            }
    }