Vue.js стиль привязки (класс) каждого элемента в списке с v-для зависит от данных элемента - PullRequest
Новая
       9

Vue.js стиль привязки (класс) каждого элемента в списке с v-для зависит от данных элемента

0 голосов
/ 25 апреля 2018

У меня есть объект Vue с массивом элементов в качестве данных (в моем случае, самолеты).Пока что список составлен правильно.

Теперь возникает проблема.Я хочу применить разные стили при выполнении итерации с v-for к каждому элементу (плану полета) в списке, зависящем от значения текущего итеративного члена плана полета fplType.В настоящее время все элементы списка (полетные планы) получают класс flightplan-list-ifr-dep.

Но мне нужно что-то вроде (псевдокод): 

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

Таким образом, каждый элемент получает свой собственный класс, примененный в зависимости отfplType текущего итерированного плана полета. 

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

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

Ваш синтаксис почти правильный, но поскольку имена ваших классов содержат символ "-", вам просто нужно заключить их в кавычки v-bind:class: 

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

Демонстрационная версия 

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>
0 голосов
/ 25 апреля 2018

Ваш псевдокод правильный. Вы можете связать класс динамически. См. Привязки класса и стиля

Таким образом, следующий код будет работать для вас: 

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

А при использовании v-for рекомендуется всегда использовать уникальный ключ.

Я сделал для вас упрощенный пример. Смотрите его в действии

0 голосов
/ 25 апреля 2018

Вы можете использовать синтаксис стиля объекта следующим образом: 

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

... или используйте метод: 

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