Vue JS: Looping through object inline attribute

Question

I am new to vue.js so this might be an easy question, but I unfortunatelly didnt come to a result on my own.

So this is the basis of my template:

<template v-for="page in $props.data.pageInfo" >
  <div class="overviewItem" :key="page.uid" :data-cat=" **looping through the object to get both cat_id's ** ">
    <div v-for="(cat, index) in page.categories" :key="index" >
      <p v-if="index === 0" class="subtitle">
        {{ cat.title }}
      </p>
    </div>
  </div>
</template>

{{ page.categories }} has the following values at the first .overviewItem:

[
{
  "cat_id": 1,
  "title": "Kategorie 1"
},
{
  "cat_id": 2,
  "title": "Kategorie 2"
}
]

The loop to get the subtitle works perfectly fine, but I cannot find any option on how to loop through this object so that i get the two values of data-cat attribute.

Remove the v-if on the <p> which is only allowing the first item to be rendered and put data-cat on the loop <div> — Dan
– Dan, Commented Dec 30, 2020 at 15:35
I need the data-cat to be outside (on the .overviewItem). Inside I do actually only want the first title to be displayed, that is working fine for me. — Tanja K.
– Tanja K., Commented Dec 30, 2020 at 15:47

Dan · Accepted Answer · 2021-01-13 13:00:36Z

1

Use .map to generate a new array of just the cat_id and then join them together with a space in between:

<div
   class="overviewItem"
   :key="page.uid"
   :data-cat="page.categories.map(c => c.cat_id).join(' ')"
>
...
</div>

answered Jan 13, 2021 at 13:00

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

Collectives™ on Stack Overflow

Vue JS: Looping through object inline attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related