Vuejs：如何在 V 模型中不使用 boolean 值？

Question

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>

Answer 1

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"