Vue: добавить несколько классов внутри v-for на основе массива

Question

Мне нужно добавить классы к элементу на основе категорий. Вот мой пример данных:

data() {
  return {
    projects: [
      {
        title: 'Project 1',
        categories: [{ name: 'featured' }, { name: 'category-1' }],
      },
      {
        title: 'Project 2',
        categories: [{ name: 'category-2' }],
      },
    ],
  };
},

Что мне нужно, это добавить категории непосредственно как классы в div-обертке (с v-for), который будет отображать:

<div class="featured category-1">
  <h3>Project 1</h3>
</div>
<div class="category-2">
  <h3>Project 1</h3>
</div>

Я не уверен, как это сделать?

<div v-for="(project, index) in projects" :class="v-for="(category, index) in project.categories???">
  {{project.title}}
</div>

Должен ли я сделать это по-другому? Я не могу понять это. Спасибо за вашу помощь!

Answer 1

Все просто:

  <div v-for="project in projects" :class="classExtraction(project)">
    <h3>
    {{project.title}}
    </h3>
  </div>

Вам нужен метод, который извлекает классы из категорий вашего проекта:

  methods: {
    classExtraction(item) {
        return item.categories.map(cat => cat.name);
    }
  }

http://jsfiddle.net/eywraw8t/371192/

Также обратите внимание, что вы должны использовать директиву :key, в которой v-for привязывает ее к уникальному свойству, предпочтительно к id объекта: https://vuejs.org/v2/style-guide/#Keyed-v-for-essential