Vuejs: how do you pass class(classes) to template?

Question

What is the right syntax to pass class to %item.class% in the following code? Any syntax like [item.class] or {{ item.class }} passes it as string without render. How to pass it properly?

How to pass several classes and apply to several tags (a, span etc.) nested in one template? Pass an array? How to iterate it?




let component = Vue.component('component', {
       props: ['item'],
       template: `
                     
                     
                  `
       }),
       data: function (){
        return {
            List: [
                {key:0, class:'someClass'},

            ]
        }
    },
 })

Thanks beforehands :)

user_11244772 · Answer

user_3910879 · Answer

Solution: You can pass an object to v-bind:class :class to dynamically toggle classes:

Binding HTML Classes

Object Syntax :

data: {
  isActive: true
}

Array Syntax:

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Vuejs: how do you pass class(classes) to template?

3 Answers