Here my code :

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

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

Here what i tried :

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



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

Do you have others ideas ?

Here my code :

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

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

Here what i tried :

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



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

Do you have others ideas ?

• javascript
• vue.js
• boolean
• v-model

• "Do you have others ideas?" Yes, use a Vue puted. Which does not warrant an answer, but rather, a deeper understanding of Vue – Dexygen Commented Apr 3, 2020 at 13:40

4 Answers 4

Consider using true-value and false-value as shortcuts:

<input
    v-model="b.inactive"
    type="checkbox"
    :true-value="false"
    :false-value="true"
>

Or in this case, where you may be looking for alternating integers, you can just set them directly.

<input
    v-model="b.inactive"
    type="checkbox"
    :true-value="1"
    :false-value="0"
>

You should do the following:

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

mounted(){
      this.b['inactive'] = !(this.b['inactive']);
}

For better practice, you can use puted:

<input
   v-model="checkedItem"
   type="checkbox"
   @click="setInactive(b.id_base_product_bination)"
>

puted: {
      checkedItem: {
        get: function () {
          return !this.b['inactive'];
        },
        set: function (newVal) {
          console.log("set as you want")
        }
}

If you want to invert the v-model, then just make a custom input ponent!

checkbox-inverted

Vue.ponent('reverse-checkbox', {
  props: ['value', 'label'],
  template: `
    <label>
      <input
        type="checkbox"
        :checked="valueInverse"
        @input="onInputChanged"
      />
      <span>{{label}}</span>
    </label>
  `,
  puted: {
    valueInverse() {
      return !this.value;
    },
  },
  methods: {
    onInputChanged(e) {
      this.$emit('input', this.valueInverse);
    },
  },
});

Usage

Then you can use it with v-model like any other input ponent. more information about custom inputs here

<reverse-checkbox
  v-model="invertedModel"
  label="This checkbox will show the inverted value"
></reverse-checkbox>

You can customize the event and property of checkbox instead of using v-model.

<input
    class="form-check-input"
    type="checkbox"
    :id="day.label"
    :checked="!day.is_closed" 
    @change="($event) => day.is_closed = !day.is_closed"
/>

For example in my case, I have a checkbox HTML element. so I set checked and change property.

• <input> with text types and <textarea> elements use value property and input event;
• <input type="checkbox"> and <input type="radio"> use checked property and change event;
• <select> use value as a prop and change as an event.