Vuejs：如何在 V 模型中不是布尔值？

Question

我从 API 中获得了options.customerdata.showbuttonas 的值true，所以现在开关处于开启状态。

我希望开关处于关闭状态，因此v-model="false"应该给出。但尝试给予

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

不起作用并显示错误。如何实现这一目标？

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

Answer 1

模型不能是表达式（必须是数据/属性的引用）

最简单的方法是定义数据并将其设置为否定值。但请注意，在这种情况下，在组件初始化后更改客户数据时，您的模型不会更改。

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

如果您需要将值存储回选项（或将值绑定到客户数据），您还可以将计算属性与 setter/getter 一起使用

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

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

对于这两种情况，您将其绑定

v-model="show"