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

Posted 2023-02-22

【中文标题】Vue JS：循环通过对象内联属性

【英文标题】：Vue JS: Looping through object inline attribute

【发布时间】：2021-04-07 02:25:12

【问题描述】：

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

page.categories 在第一个 .overviewItem 处具有以下值：

[

  "cat_id": 1,
  "title": "Kategorie 1"
,

  "cat_id": 2,
  "title": "Kategorie 2"

]

获取字幕的循环工作得很好，但是我找不到任何关于如何循环这个对象的选项，以便我得到 data-cat 属性的两个值。

【问题讨论】：

删除<p> 上的v-if，它只允许渲染第一个项目并将data-cat 放在循环<div> 上

我需要数据猫在外面（在 .overviewItem 上）。在里面我实际上只希望显示第一个标题，这对我来说很好。

【参考方案1】：

使用.map 生成一个仅包含cat_id 的新数组，然后将它们连接在一起，中间有一个空格：

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