VueJs 将属性绑定到条件

Question

我正在使用 vue-datepicker，它具有某些属性，例如禁用、日历按钮等。我想将这些属性绑定到条件或数据对象中的布尔值。

我试过了<date-picker disabled-picker=true></date-picker>

但它抛出错误：expected Boolean, string given

我期望的是，如果条件为真，那么输出应该是这样的：

<date-picker disabled-picker></date-picker>

如果条件为假，

<date-picker></date-picker>

我知道我可以在它周围使用 v-if 包装器（v-if else），但我正在寻找一个 v-bind 解决方案，就像我们如何使用 html 属性一样。

谢谢。

Answer 1

默认情况下 :disabled-picker="isDisabled" 像字符串一样解析。

你应该去 :disabled-picker="isDisabled" insead。

export default {
  data () {
    return {
     isDisabled: true
    }
  }
}

Answer 2

你应该这样做：

<date-picker :disabled-picker="someVariableWithTrueOrFalse"></date-picker>

请务必在您的数据部分声明 someVariableWithTrueOrFalse: false。

您说您只希望属性显示为真而不显示为假但是

<date-picker disabled-picker></date-picker>

基本上等同于我最初提供的示例。将值设置为 false 与不存在的属性相同。

VueJs binding properties to conditions