Javascript Vue JS：通过对象内联属性循环

我是vue.js新手，所以这可能是一个简单的问题，但不幸的是，我自己并没有得出结果

这就是我的模板的基础：

<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>

---

获取字幕的循环工作得非常好，但是我找不到任何选项来选择如何循环通过此对象，以便获得data cat属性的两个值。

使用

.map

生成一个新的数组，该数组仅包含

cat\u id

，然后在它们之间加上一个空格：

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

...

移除

上的

v-if

，它只允许渲染第一个项目，并将

数据cat

放在循环上

我需要数据cat在外部（在.overview项目上）。在里面，我确实只想显示第一个标题，这对我来说很好。

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