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

The initial call to the method results in an undefined return value

Can you explain the contrast between window.performance and PerformanceObserver?

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

Develop a Modal Form using Bootstrap (HTML)

Enhancing the functionality of localStorage

Listener document.addEventListener (function() {perform the function as shown in the illustration})

Unselected default option in Angular 4's select dropdown

What is the specific function of jQuery Custom events and how do they operate

IE8 is not properly handling nested HTML elements that have the display:none property set

Bringing in a feature within the Vue 3 setup

What is the reason behind the necessity for a React class component to always invoke super(props) within its constructor function?

Utilizing the Google Translate API within an ASP MVC framework to translate a div's content from English to Arabic

I am looking to enable dragging for specific columns in the table using [Vue.Draggable]

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

Set the class of an element dynamically using ng-class and detect changes with ng-change

The Swiper library is incompatible with the "vue" version "^2.6.11" and cannot be used together

Replicate the form to a new one while concealing the elements and then submit it

The issue arises in Selenium IDE when a variable is mistakenly identified as a string instead of a

Trouble with displaying ChartsJS Legend in Angular11

Issue with the close button on ngb-alert not functioning properly