I am relatively new to working with vue.js, and I have encountered a challenge that I haven't been able to solve on my own.
Here is the basic structure of my template:
<template v-for="page in $props.data.pageInfo" >
<div class="overviewItem" :key="page.uid" :data-cat=" **I need to loop through the object to extract both cat_id values** ">
<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 }} displays these values for the first .overviewItem:
[
{
"cat_id": 1,
"title": "Category 1"
},
{
"cat_id": 2,
"title": "Category 2"
}
]
The code to retrieve the subtitle is functioning correctly, but I'm struggling to figure out how to iterate over this object to capture both values for the data-cat attribute.