Vue.js bind style (class) of each item in list with v-for dependent on item data

v-bind:class not working
vue list component
vue change color on click
v-for index
vue conditional attribute
v-for v-bind
v-bind:key
vue data array

I have a vue object with an array of items as data (in my case flightplans). The list is rendered correctly so far.

Now comes the problem. I want to apply different styles while iterating with v-for to each item (flightplan) in the list dependent of the value of current iterated flightplan memeber fplType. Currently all list items (flightplans) get the class flightplan-list-ifr-dep.

But i need something like (pseudo code):

<li v-for="flightplan in flightplans"
    v-bind:id="flightplan.id"                        
    v-bind:class="{
      flightplan-list-ifr-dep: flightplan.fplType === 'departure',
      flightplan-list-ifr-arr: flightplan.fplType === 'arrival'
    }"
>

So each items gets its own class applied dependent from the fplType of the current iterated flightplan.

<div id="flightplan-list-area" class="flightplan-list-area-style">
  <ul>
    <li v-for="flightplan in flightplans"
      v-bind:id="flightplan.id"
      @click="selected(flightplan, $event)">
      <div class="flightplan-list-ifr-dep">
          <p class="flightplan-list-ifr-dep-callsign">{{ flightplan.callsign }}</p>
          <p class="flightplan-list-ifr-dep-aircraft-type">{{ flightplan.aircraft_type }}</p>
          <p class="flightplan-list-ifr-dep-aircraft-wtc">{{ flightplan.aircraft_wtc }}</p>
      </div>
    </li>
   </ul>
</div>


<script lang="javascript"> 
var vue_FLIGHTPLAN_MODEL = new Vue({
  el: "#flightplan-list-area",

  data: {
    flightplans: [],
    selected_flightplan_element: null,
  },
});
</script>

Your syntax is almost right, but since your class names contain the "-" character, you just need to quote them inside v-bind:class:

...
v-bind:class="{
    'flightplan-list-ifr-dep': flightplan.fplType === 'departure',
    'flightplan-list-ifr-arr': flightplan.fplType === 'arrival'
}"
...
Live demo

var vue_FLIGHTPLAN_MODEL = new Vue({
  el: "#flightplan-list-area",

  data: {
    flightplans: [
      { id: 1, callsign: 'ABC', aircraft_type: 'Boeing 737', aircraft_wtc: 'xyz', fplType: 'departure' },
      { id: 2, callsign: 'DEF', aircraft_type: 'Boeing 737', aircraft_wtc: 'uvw', fplType: 'arrival' },
      { id: 3, callsign: 'HIJ', aircraft_type: 'Boeing 737', aircraft_wtc: 'abc', fplType: 'departure' },
    ],
    selected_flightplan_element: null,
  },
  
  methods: {
    selected (plan, e) {
      this.selected_flightplan_element = plan;
    }
  },
});
li.flightplan-list-ifr-dep {
  color: blue;
}

li.flightplan-list-ifr-arr {
  color: green;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="flightplan-list-area" class="flightplan-list-area-style">
  <ul>
    <li v-for="flightplan in flightplans"
                v-bind:id="flightplan.id"
                v-bind:class="{
                        'flightplan-list-ifr-dep': flightplan.fplType === 'departure',
                        'flightplan-list-ifr-arr': flightplan.fplType === 'arrival'
                    }"
                @click="selected(flightplan, $event)">
                <div class="flightplan-list-ifr-dep">
                    <p class="flightplan-list-ifr-dep-callsign">{{ flightplan.callsign }}</p>
                    <p class="flightplan-list-ifr-dep-aircraft-type">{{ flightplan.aircraft_type }}</p>
                    <p class="flightplan-list-ifr-dep-aircraft-wtc">{{ flightplan.aircraft_wtc }}</p>
                </div>
            </li>
   </ul>
</div>

Class and Style Bindings, A common need for data binding is manipulating an element's class list and its inline We can pass an object to v-bind:class to dynamically toggle classes: For this reason, Vue provides special enhancements when v-bind is used with class and style. In addition to strings, the expressions can also evaluate to objects or arrays. In addition to strings, the expressions can also evaluate to objects or arrays.

Your pseudocode is right.You can bind a class dynamically.See class and style Bindings

So the follow code will work for you:

<li v-for="flightplan in flightplans"
    :key="flightplan.id"
    v-bind:id="flightplan.id"                        
    v-bind:class="{
           'flightplan-list-ifr-dep': flightplan.fplType === 'departure',
           'flightplan-list-ifr-arr': flightplan.fplType === 'arrival'
          }"
 >

And when using v-for,it is recommended always to use a unique key.

I made a simplify example for you.See it in action

Vue.js bind style (class) of each item in list with v-for , Your syntax is almost right, but since your class names contain the "-" character, you just need to quote them inside v-bind:class : For this reason, Vue.js provides special enhancements when v-bind is used for class and style. In addition to Strings, the expressions can also evaluate to Objects or Arrays. In addition to Strings, the expressions can also evaluate to Objects or Arrays.

You can either use the object style syntax like so:

<li v-for="flightplan in flightplans">
  <div :class="{
    'fpl-foo': flightplan.fplType === 1,
    'fpl-bar': flightplan.fplType === 2,
    'fpl-baz': flightplan.fplType === 3
  }">
    <!-- ... -->
  </div>
</li>

...or use a method:

<li v-for="flightplan in flightplans">
  <div :class="getClass(flightplan.fplType)">
    <!-- ... -->
  </div>
</li>

methods: {
  getClass (fplType) {
    // Determine the class and return it,
    // this can also be an array in case
    // of more than one class
  }
}

Dynamic Styles With Vue.js ← Alligator.io, Vue.js allows for binding styles and classes dynamically to elements with the v-​bind:style and v-bind:class directives. Here's our data model: Rather than having all the styles in the inline expression, we can keep a styles object in the Note the importance of the order of the items in the array, with later  I am trying to bind a sortable list in Vue.js, but the underlying data list is not updated:

An introduction to dynamic list rendering in Vue.js, The content displayed in these lists depends on a multitude of factors — our As a result, we can say all this data is dynamic. The v-for directive is used to render a list of items based on a data source. <div id="app" class="columns"> <​div class="column"> <tweet-component v-for="tweet in tweets"  Vue.js allows for binding styles and classes dynamically to elements with the v-bind:style and v-bind:class directives. Dynamically Binding Styles. Let’s say we want to increase or decrease the font size based on user input. To this end, Vue provides us with the v-bind:style directive. Here’s our data model: data() { return { fontSize: 10 } }

List Rendering, This page comes from the official Vue.js documentation and has been adapted for Vue GWT. We can use the v-for directive to render a list of items based on an array. form of Type item in items , where items is the source data array, item is an alias for @Component public class SimpleTodoListComponent implements  I have an array (history) that is being pushed two items every time a button is pressed. Those two items will need to have different css styles when printed.

Styling with CSS Classes in Vue.js, Learn how to style HTML elements with CSS classes in Vue.js, by using the v-​bind The keys of the object should match the class names, and the values With this, each div element will contain the shape class plus either each expression can be a string or the name of a data property, for instance. Iterating Over Items in Vue.js With V-for. by default Vue would change the data in each existing element rather than moving the DOM elements to the updated position.

Comments
  • The chapter about class and style bindings in the official guide covers this very well :)
  • I can not find the solution when data is an array and with iterating...
  • @NandoLambrusco if your problem is solved, please consider marking an answer as accepted
  • Yes this is true
  • when you call the getClass method,you pass fplType.Am i wrong or you have to pass flightplan.fplType?
  • Thank you Lars! That solves my problem perfectly! I am very new to vue.js so sorry for this question... Have a nice day