Dynamic class name

Question

How to create a 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 does not work! I need this class name to update the div later.

Answer 1

It helps me.

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

Answer 2

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 the "active class" will be applied. And the "static-class" is always applied in the view. This is called array syntax.

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

You need to make sure the slim-lang processor emits the above html.

Now, having come to the id setting, you cannot use attribute bindings using mustache syntax ( {{...}} ). You need to bind your id as follows:

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

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

Answer 3

Your code really works, I think the problem is with setting up vue data. I love it 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'}, ] } });