Vue условия для связывания классов

Question

Я пытаюсь выяснить, как связать классы со строкой таблицы условно на основе модели VUE.

В моем клинке у меня есть:

.low-priority{
    background-color: purple;
}
.high-priority{
    background-color: orange;
}
.important-priority{
    background-color: yellow;
}
.critical-priority{
    background-color: red;
}

и в моем шаблоне Vue я возвращаю dateEvents объект, который имеет значение, называемое priority который может быть "High", "Low", "Important" или же "Critical",

Я хочу установить класс этой строки таблицы по следующим приоритетам:

<tr v-bind:class="dateEvent">

Я видел документы для привязки класса, если возвращение равно true или false, но как мне сделать это соответствующим образом с помощью условных выражений, т.е. if dateEvent.priority === 'Low' then class is .low-priority'

Answer 1

Не уверен, что вам нужно условие в этом случае:

<tr :class="`${dateEvent.priority.toLowerCase()}-priority`">

Или, если вам не нравятся спины:

<tr :class="dateEvent.priority.toLowerCase() + '-priority'">

Более общим решением было бы использование вычисляемого свойства. В обстоятельствах, которые будут немного повторяться, хотя.

<tr :class="rowClass">

computed: {
  rowClass () {
    const priority = this.dateEvent.priority

    return {
      'low-priority': priority === 'Low',
      'high-priority': priority === 'High',
      'important-priority': priority === 'Important',
      'critical-priority': priority === 'Critical'
    }
  }
}

Если dateEvents недоступно через this потому что это параметр цикла (т.е. из v-for) тогда ты сделаешь rowClass метод вместо этого и передать в dateEvents из шаблона.

Другие варианты по этой теме доступны: https://vuejs.org/v2/guide/class-and-style.html