[Vuejs]-How to use true and false statement in a binded class using vuejs

by

1đź‘Ť

Classes are conditionally added if the expression on the right-hand side evaluates to true. So if v$.allActivityPeriods.$each.$response.$errors[index].from.length > 0 equals true then the form-error-outline class will be applied to the element.

It looks like some deeply nested state, and I don’t know what that root v$ variable is. But you should have some sort of property (computed or otherwise) in your component itself that you can access and check:

<DatePicker
    :class="{ 'form-error-outline': hasErrors['field_name'] }"
/>

export default {
  computed() {
    hasErrors(field) {
      return field in this.errors && this.errors[field].length > 0;
    },
  },
};
👤Martin Bean

0đź‘Ť

You could do the following with an array syntax for the class and using ternary operators to check for conditions

<Datepicker
        :class=“[v$.allActivityPeriods.$each.$response.$errors[index].from.length > 0 ?
  'form-error-outline': 
 'regular style', 
'more unconditional styles here'
]”
👤thezohaan

Leave a comment