Dynamic class name

Question

How to generate dynamic class name?

  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }} " style="float:right; color:red;"

This sample doesn't work! I need this class name to update the div later!!!

score 95 · Accepted Answer · answered Oct 31 '16 at 18:14

95

This helped me.

    div :class="['obj-' + obj.id]" style="float:right; color:red;"

answered Oct 31 '16 at 18:14

NeverBe

5,213
2
25
39

Worked. Wonderfull! this should be listed on documentation though. – Yuda Prawira Aug 07 '18 at 10:10
7

Works great. With ES6: `:class="[\`obj-${obj.id}\`]"` – Fabian von Ellerts May 21 '19 at 11:41

score 57 · Answer 2 · answered Oct 31 '16 at 17:14

I am not familiar with slim-lang, but this is what you need to get inside the Vue template:

<div v-bind:class="['static-class', { 'active-class' : isActive }]">...</div>

In the above case, if isActive evaluates to true, then 'active-class' will be applied. And 'static-class' is always applied in the view. This is called array syntax.

Ref: https://vuejs.org/guide/class-and-style.html#Array-Syntax

You need to ensure that the slim-lang processor emits the above html.

Now, coming to setting an id, you cannot do attribute bindings using moustache ({{...}}) syntax. You need to bind your id as follows:

<div v-bind:id="dynamicId"></div>

Reference: https://vuejs.org/guide/syntax.html#Attributes

I'm not sure i understand your examples, i don't need to use conditional classes, i need static ones. — NeverBe, Oct 31 '16 at 18:01

score 29 · Answer 3 · answered Jun 05 '18 at 08:19

29

For multiple classes:

:class="{'form-control':true,['box_'+index]:true}"

answered Jun 05 '18 at 08:19

Abhinandan

429
8
13

score 2 · Answer 4 · answered Apr 14 '21 at 09:16

In vue ,dynamic classed can be added in several ways.

Array

 :class="['prise', index === 0 ? 'first' : '', index === 1 ? 'second' : '']"

here,the prise will be added to the class no matter what happen,but only when the index is equal to 0,then the first will be added to the class name,and index is equal to 1,then the second will be added to the class.

Object

  :class= "{ 'ultra-prise','first":index===0,'second':index===1}"

here,in Object case ,the key will be added to the class only when the value is true.

so for this question,simply we can write something like this.

   :class="[`obj-${obj.id}`]"

score 1 · Answer 5 · answered Nov 01 '16 at 06:39

Your code actually work, i guess the problem is vue data setting. I love slim too.

div#posting
  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }}" class="obj-{{ obj.id }} " style="float:right; color:red;"

javascript:
  var posting;
  posting = new Vue({
    el: '#posting',
    data: {
      objs:
        [
          {id: 1, title: 'xx'},
          {id: 2, title: 'yy'},
        ]
    }
  });

score 0 · Answer 6 · answered Feb 19 '21 at 15:12

<li v-for="color in colors" :class="[color.style]" class="list">{{color.name}}</li>
</ul>

https://codepen.io/mike-oxhuge/pen/mdOMybP

   data: {
  colors: [
    { id: "1", name: "blue text", style: "blue" },
    { id: "2", name: "red text", style: "red" },
    { id: "3", name: "green text", style: "green" }
  ],
},

Here I made it work. Dynamic name for a class.

Dynamic class name

6 Answers6