Vue.js JS Array value to be added to class name

Question

I have a code in Vue.js

<li v-for = "record in records" v-bind:key= "record.id">
                  <div class="collapsible-header"><i class="material-icons">date_range</i><h6>{{record.record_date}}</h6> &nbsp &nbsp <span class="chip white-text">

I want to add {{record.record_status_color}} to the span class="chip white-text"

so it should change color depending upon the value of record.record_status_color

how do I do this in Vue.js

basically it should look like this assuming that {{record.record_status_color}} is green

<span class="{{record.record_status_color}} chip white-text">

<span class="green chip white-text">

Answer 1

I'm personally not a fan of having class and :class on one element. You can do all 3 with :class

<span :class="[record.record_status_color, 'chip', 'white-text']">

Equals

<span class="green chip white-text">

Answer 2

You can have both class="..." and dynamic binding :class="..." on the same element, where classes listed in class="..." are always on the element, and classes in :class="..." depend on your model and are dynamically added/removed as per what's going on in the model.

In the :class binding you can bind either String , Object or Array :

<span class="green chip white-text" :class="record.record_status_color">

where record.record_status_color: 'green'"> and some CSS defining the looks for .green elements.

Object use for multiple classes, or for applying conditional usage of the class:

classObject: {
  active: true,
  'text-danger': false
}

and then

<div :class="classObject"></div>

which would resolve to

<div class="active"></div>

You can also pass an Array to :class :

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

and then

<div :class="[ activeClass, errorClass ]"></div>

which will render to

<div class="active text-danger"></div>

You can even use expressions in the Array syntax:

<div :class="[isActive ? activeClass : '', errorClass]"></div>

or

<div :class="[(new Date().getFullYear() > 2018) ? activeClass : '', errorClass]"></div>

More information on the subject, along with these examples, can be found in the official documentation.

https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 3

You can try this:

<span class="green chip white-text" :class="[record.record_status_color]">

https://v2.vuejs.org/v2/guide/class-and-style.html