Do class bindings with variables need to be inline when using Vue 3?

Question

Do class bindings with variables need to be inline when using Vue 3?

Consider the following HTML:

<template v-for="(child, index) in group">
    <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}">
        <div>Container Content</div>
    </div>
</template>

Is there a method to externalize the class binding from the HTML while still relying on a condition passed via the v-for loop (child.id)?

Although the documentation mentions the possibility of binding computed properties, it seems that they do not accept arguments. I have attempted this approach without success.

javascript css vue.js vue-component vuejs3

Answer 1

Answer №1

One way to handle this is by creating a method and passing the item as an argument:

<div :class="classes(child)">

setup() {
  ...
  const classes = (child) => {
    return {
      'border-pink-700 bg-gray-100': selected.value === child.id
    }
  } 
    
  return {
    ...
    selected,
    classes
  }
}

If you are working with Vue 2 or the Options API, you can achieve this like so:

methods: {
  classes(child) {
    return {
      'border-pink-700 bg-gray-100': this.selected === child.id
    }
  }
}

Just remember not to modify instance properties within the method, but it's okay to read them.

Answer 2

One way to handle this is by creating a method and passing the item as an argument:

<div :class="classes(child)">

setup() {
  ...
  const classes = (child) => {
    return {
      'border-pink-700 bg-gray-100': selected.value === child.id
    }
  } 
    
  return {
    ...
    selected,
    classes
  }
}

If you are working with Vue 2 or the Options API, you can achieve this like so:

methods: {
  classes(child) {
    return {
      'border-pink-700 bg-gray-100': this.selected === child.id
    }
  }
}

Just remember not to modify instance properties within the method, but it's okay to read them.

Do class bindings with variables need to be inline when using Vue 3?

Answer №1

Similar questions

What are the steps for positioning tables using HTML?

Displaying Errors from Controllers in React Hook Forms

Displaying a timer output in an HTML div every second using PHP

What is the best way to retrieve JSON values based on a key using JavaScript, jQuery, or AngularJS?

Issue with Titanium: Unable to scroll within tableview

Ways to identify the moment jQuery datatable is initialized and populated with information

How can I trigger a masterpage function from a contentpage in asp.net?

Updating the state of a React component through a button click using React-JS

Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

JavaScript: Filtering list by elements that contain a certain value

Every time I try to install npm, I am bombarded with a massive error log

An error has occurred in Angular5 and Three.js: 'Scene1' property is undefined

Altering the dimensions of Bootstrap's default navbar for a more compact look

What is the method to turn off readonly property for input fields in Laravel?

Strategies for halting the return of a JavaScript function until all AJAX requests have been completed

Creating ellipses using Three.js with a specified list of points

Managing PHP multiple follow-up options in HTML select fields

Addressing memory leaks in React server-side rendering and Node.js with setInterval

Learn the steps to update PHP headers on a specific website using AJAX

Shifting gradient hues for illustrations?