Search code examples
vuejs2vuejs-datepicker

VueJs binding properties to conditions

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.

Solution

  • 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