Vuejs : How to not a boolean value in V-model?

user_12845142 0
Viewed 6898

I am getting value of options.customerdata.showbutton as true from an API, so now the switch is in on condition.

I want the switch to be in off, hence v-model="false" should be given. But tried giving

v-model="!(options.customerdata.showbutton)"

does not work and shows error. How to achieve this?

<b-form-checkbox v-model="options.customerdata.showbutton" name="logo-display" switch >
</b-form-checkbox>
v-model vue.js
1 Answers

Model can't be expression (it must be reference to data/property)

Easiest way is define data and set it with negated value. But be aware that in this case your model is not change when customerdata is changed after component initialization.

data: {
  return {
    show: !this.options.customerdata.showbutton
  } 
}

If you need to store value back to options (or bound value to customerdata), you can use also computed property with setter/getter

computed {
  show: {
    get () {
      !this.options.customerdata.showbutton
    }

    set (value) {
      this.options.customerdata.showbutton = !value
    }
  }
}

For both case your bind it with

v-model="show"
user_18389840
Related