Using V-bind to assign multiple classes has never been easier

Question

Using V-bind to assign multiple classes has never been easier

Is there a way to assign one of two classes to an element based on three possible input variables in my Vue.js code?

<input type='text' class='inputwordtext' v-bind:class="{(wordupload.firstchoice.selected == 'Zinnenlijst') : wordlongwidth, (wordupload.firstchoice.selected != 'Zinnenlijst') : wordshortwidth}">

I want the element to have the class "wordlongwidth" if wordupload.firstchoice.selected is equal to Zinnenlijst. Otherwise, it should have the class "wordshortwidth". How can I achieve this?

javascript class vue.js

Answer 1

Answer №1

If you want to achieve this with just one line of code, you can use a ternary operator like this:

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

However, for better readability, it is recommended to create a computed property:

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

Then simply reference the computed property in your template:

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

Answer 2

If you want to achieve this with just one line of code, you can use a ternary operator like this:

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

However, for better readability, it is recommended to create a computed property:

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

Then simply reference the computed property in your template:

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

Answer 3

Answer №2

In the documentation for vue.js, it is recommended to use a ternary expression and combine v-bind:class with your regular class in the following way:

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

To find more information about class binds, refer to the vue.js documentation here:

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

If you want to learn more about ternary expressions, check out this resource:

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

Answer 4

In the documentation for vue.js, it is recommended to use a ternary expression and combine v-bind:class with your regular class in the following way:

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

To find more information about class binds, refer to the vue.js documentation here:

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

If you want to learn more about ternary expressions, check out this resource:

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

Using V-bind to assign multiple classes has never been easier

Answer №1

Answer №2

Similar questions

Async await function two is failing to execute

Clicking on the mail icon will open the mail with the associated mail id

What could be causing the submission failure of the form post validation?

Retrieving the Textfield value upon clicking the InputAdornment in Material UI

How Meteor Handles HTTP Requests in its package.js File

Securing your Node.js connect-rest REST API with OAuth: A comprehensive guide

What is the best way to switch from rows to cards in Bootstrap version 5.3?

Pass the JSON object to a separate .js file in react-native without using class declarations

Issue with receiving output from tessearct.js in PDF format

Delete elements with identical values from array "a" and then delete the element at the same index in array "b" as the one removed from array "a"

Sides of the BoxGeometry

The error message states: "change is not defined"

The React Router's Switch component fails to update when the route is changed

What is the best way to retrieve the page slug within the layout file in Next.js, specifically when using the app folder structure?

Reverse action on Angular checklist-model checkboxes

Having trouble connecting to the Brewery API, could use some guidance from the experts (Novice)

Insert a Facebook like button within a designated div

Exploring the process of retrieving MongoDB documents with methods such as findOne() or find() in Node.js, particularly when the models and schema are contained in a separate file

Typing the url in the address bar when using Angular's ui-router

Is there a way to access the result variable outside of the lambda function?