Как реализовать добавление классов в список vue через computed?

Question

[nurdus]

Добрый день.
Есть такой список (код работает):

<tr v-for="job in jobs" :key="job._id" :class="[ 
  job.state,
  job.isRead ? '' : 'no-read', 
  new Date() >= Date.parse(job.finalDate) ? 'overdue' : ''
  ]">
  <td>{{ job.subject }}</td>
  <td>{{ job.executor }}</td>
</tr>

Хотел сделать его чуть красивее, перенеся вычисление классов в "computed", но ничего не получается, не могу передать текущую запись, пробовал так (код ниже не работает):

<tr v-for="job in jobs" :key="job._id" :class="jobClass(job)">
  <td>{{ job.subject }}</td>
  <td>{{ job.executor }}</td>
</tr>

computed: {
  jobClass: function(job) {
    return {
      done: job.state,
      break: job.state,
      //...
    }
  }
}

пишет что jobClass не является функцией, если classs="jobClass" делать, то как передать job в computed?

Answer 1

[0xD34F]

пишет что jobClass не является функцией

Ну вот и поместите его в methods. Не надо пытаться использовать инструмент непредусмотренным способом.

Comments

[nurdus]

Спасибо :)

Answer 2

[egerr]

если использовать computed для работы с классами, то это выглядит например вот так

countColor() {
        return {
          red: this.comment.rating.count < 0,
          green: this.comment.rating.count > 0,
        };
      },

и в шаблоне :class="countColor"

в твоём случае computed не подойдет, потому что в него нельзя передать параметр, который будет известен при рендере списка. тебе надо просто написать метод (в methods), который будет так же возвращать имя нужного тебе класса. ниже кусок моего кода, в котором по сути тоже самое, только надо будет переписать с входным параметром:

categoryTitle() {
        let catTitle = '';
        if (!this.$route.params.category) {
          catTitle = 'Новости<br> игрового мира';
        }
        if (this.$route.params.category === 'news') {
          catTitle = 'Новости';
        }
        if (this.$route.params.category === 'articles') {
          catTitle = 'Статьи';
        }
        return catTitle;
      },