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

Question

我从 API 中获取 options.customerdata.showbutton 的值为 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
  } 
}

如果您需要将值存储回选项(或将值绑定(bind)到客户数据)，您还可以使用带有 setter/getter 的计算属性

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

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

对于这两种情况，您都将其绑定(bind)

v-model="show"