Vue: add multiple classes inside a v-for, based on array

Question

I need to add classes to an element, based on categories. Here is my example data:

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

What I need is to add the categories directly as classes on the wrapper div (with the v-for), that will render:

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

I'm not sure how to do this?

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

Should I do this differently? I can't seem to figure it out. Thanks for your help!

tony19 · Accepted Answer · 2022-07-15 02:08:49Z

5

It's simple:

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

You need a method that extracts classes from your project's categories:

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

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

Also, please note that you should use :key directive with v-for binding it to a unique property, preferably object's id: https://v2.vuejs.org/v2/style-guide/#Keyed-v-for-essential

edited Jul 15, 2022 at 2:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 17, 2018 at 8:16

dziraf

3,6531 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Miller Over a year ago

Perfect! Works great. Thanks a lot for your help!

Collectives™ on Stack Overflow

Vue: add multiple classes inside a v-for, based on array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related