[Vuejs]-V-bind class multiple options

by

4👍

✅

You could do this with a single inline expression using a tenary operator:

<input 
  type='text' 
  class='inputwordtext'
  :class="wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth'"
>

But, it would be more readable to make it a computed property:

computed: {
  inputClass() {
    let selected = this.wordupload.firstchoice.selected;
    return (selected === 'Zinnenlijst') ? 'wordlongwidth' : 'wordshortwidth';
  }
}

And then reference that computed property in your template:

<input type='text' class='inputwordtext' :class="inputClass">
👤thanksd

3👍

The vue.js documentation suggests to use a ternary expression and to combine v-bind:class and your regular class like so:

<input type='text' :class="[wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth', 'inputwordtext']">

To see where they talk about this and learn more about class binds check out their documentation:

https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

And you learn more about ternary expressions check out this source:

https://www.w3schools.com/js/js_comparisons.asp

👤Eric G

Leave a comment