Using Vue's v-bind directive with a single set of curly braces expression

Question

Using Vue's v-bind directive with a single set of curly braces expression

Currently, I am delving into the world of Vue.js to broaden my knowledge and gain practical experience.

While following a tutorial, I encountered an interesting scenario involving the addition of a class to a span element based on a condition within a v-for loop. The solution involved using an expression enclosed in single curly braces as demonstrated below:

<p v-for="todo in todos" :key="todo">
    <span :class="{'is-completed' : todo.completed}">{{ todo.title }}</span>
 </p>

The variable todo.completed is a boolean value.

I'm curious to understand the functionality behind

{'is-completed' : todo.completed}

. It seems reminiscent of object syntax in JavaScript. How does this structure work with the v-bind directive?

Your insights would be greatly appreciated!

javascript vue.js bind

Answer 1

Answer №1

It seems like a convenient shortcut that represents a computed property returning an object with individual properties indicating different class names.

<span :class="spanClasses">{{ task.name }}</span>

computed: {
  spanClasses () {
   return {
     'is-active' : this.task.activeStatus
   }
  }
}

Answer 2

It seems like a convenient shortcut that represents a computed property returning an object with individual properties indicating different class names.

<span :class="spanClasses">{{ task.name }}</span>

computed: {
  spanClasses () {
   return {
     'is-active' : this.task.activeStatus
   }
  }
}

Using Vue's v-bind directive with a single set of curly braces expression

Answer №1

Similar questions

Creating a basic accordion feature in Vue by harnessing the power of radio buttons

What are the best ways to optimize and capitalize on functionality in Electron.js?

Unleashing the Power of v-model in Vue.js: A Comprehensive Guide to Referencing Input

I am attempting to get a jquery plugin to function properly on my Windows 7 Internet Explorer IE7 browser. The plugin in question can be found at http://jvectormap.owl-hollow

Potential null object in React/TypeScript

The click listener triggers a single time when a render method is nested within it

Unable to receive acknowledgment from child component within Redux

How does a JSONP request differ from an AJAX request?

No data being fetched through Ajax

Exploring and cycling through numerous links using Selenium WebDriver in a node.js environment

Navigating with Buttons using React Router

Retrieving data from varied React components - triggered by clicking a LOG button

Create text that alternates between blinking and changing content simultaneously

Tips for capturing a broadcasted signal

Using Javascript, display an image that was previously hidden with CSS when a radio button is selected

Locate all instances of words that begin with a certain character and are immediately followed by numbers within

JavaScript - Issues with Cookie Setting

The concept of global object/scope and circular references in undefined cases

Navigate to a new webpage using a string of characters as a legitimate web address

Is there a way to export the HTML table content to an Excel sheet that is compatible with browsers such as Internet Explorer, Mozilla Firefox, and others?