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

Question

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>

The chapter about class and style bindings in the official guide covers this very well :) — Lars Beck
– Lars Beck, Commented Apr 25, 2018 at 5:39
I can not find the solution when data is an array and with iterating... — Nando Lambrusco
– Nando Lambrusco, Commented Apr 25, 2018 at 5:43
@NandoLambrusco if your problem is solved, please consider marking an answer as accepted — Marco Pantaleoni
– Marco Pantaleoni, Commented Apr 25, 2018 at 6:29

Marco Pantaleoni · Accepted Answer · 2018-04-25 06:12:01Z

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>

Lars Beck · Accepted Answer · 2018-04-25 06:20:48Z

0

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
  }
}

edited Apr 25, 2018 at 6:20

answered Apr 25, 2018 at 6:00

Lars Beck

3,5942 gold badges25 silver badges26 bronze badges

2 Comments

Roland Over a year ago

when you call the getClass method,you pass fplType.Am i wrong or you have to pass flightplan.fplType?

Nando Lambrusco Over a year ago

Thank you Lars! That solves my problem perfectly! I am very new to vue.js so sorry for this question... Have a nice day

tony19 · Accepted Answer · 2022-07-16 04:56:25Z

0

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

edited Jul 16, 2022 at 4:56

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 25, 2018 at 6:08

Roland

28.1k9 gold badges108 silver badges103 bronze badges

1 Comment

Roland Over a year ago

Yes this is true

Collectives™ on Stack Overflow

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

3 Answers 3

Live demo

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Live demo

Comments

2 Comments

1 Comment

Related