Concatenating multiple classes in Vue.js

Question

I want to write in less code a function that will add the active classname and automatically removes all the other active class names. But there is also a unique class name needed for JavaScript in my case. But want to put that all in class name. How can I make this a valid classname. Is there a way to do that so it will not conflict with each other.

    <ul class="three">
      <li 
        v-for="(post, index) in listData.data" 
        :key="index" 
        :class="'list-item unordered-list ' + post.name.toLowerCase() +  { active : activeName == post.name}" 
         @click="showInfo(post.name, post.description)">
        {{ post.name }}
      </li>
    </ul>

tony19 · Accepted Answer · 2022-07-16 00:24:14Z

1

Have a look at the object syntax or array syntax of class binding, which allows binding to an object or array returned by a value. That way you can simplify complex class or style combinations by calling a function from the template, like the example from the docs:

<div v-bind:class="classObject"></div>
...
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

edited Jul 16, 2022 at 0:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 19, 2020 at 1:38

Noah Stahl

7,7335 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user13914915 · Accepted Answer · 2020-07-19 09:16:06Z

0

    <ul class="three">
      <li 
        v-for="(post, index) in listData.data" 
        :key="index" 
        :class="['list-item', 'unordered-list ', post.name.toLowerCase(), { active: activeName == post.name }]"
         @click="showInfo(post.name, post.description)">
        {{ post.name }}
      </li>
    </ul>

answered Jul 19, 2020 at 9:16

user13914915

Collectives™ on Stack Overflow

Concatenating multiple classes in Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related