VueJs binding properties to conditions

Question

I am using vue-datepicker and it has certain properties like disabled, calendar-button, etc. I want to bind these properties to conditions or a Boolean in my data object.

I tried <date-picker disabled-picker=true></date-picker>

But it throws error: expected Boolean, string given

What I am expecting is, if a condition is true then output should be like:

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

If condition is false,

<date-picker></date-picker>

I know I can use a v-if wrapper (v-if else) around it but I am looking for a v-bind solution like how we use for html attributes.

Thank you.

Answer 1

By default :disabled-picker="isDisabled" parsed like a string.

You should go for :disabled-picker="isDisabled" insead.

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

https://codesandbox.io/s/w03ork28zw

Answer 2

You should do:

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

Be sure to declare someVariableWithTrueOrFalse: false in your data section.

You said you just want the attribute to show for true and not show for false but

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

basically equates to the example I provided initially. Setting the value to false is the same as the attribute not being there.