Skip to main content
updated docs link
Source Link
tony19
  • 140k
  • 23
  • 281
  • 354

Your pseudocode is right.You can bind a class dynamically.See class and style BindingsSee 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

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

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

added 4 characters in body
Source Link
Roland
  • 28.1k
  • 9
  • 108
  • 103

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'flightplan-list-ifr-depdep': flightplan.fplType === 'departure',
           flightplan'flightplan-list-ifr-arrarr': flightplan.fplType === 'arrival'
          }"
 >

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

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

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 an simplify example for you.See it in action

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

Source Link
Roland
  • 28.1k
  • 9
  • 108
  • 103

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 an simplify example for you.See it in action