Vue.js如何在元素属性内循环获取对象的cat_id值

嘿，别担心，刚上手Vue遇到这种小问题太正常啦！你想要在data-cat属性里拿到page.categories里的所有cat_id值，其实用数组的map和join方法就能轻松搞定~

具体修改方案 #

你只需要把:data-cat的绑定值改成下面这样：

:data-cat="page.categories.map(cat => cat.cat_id).join(',')"

原理说明 #

1. page.categories.map(cat => cat.cat_id)：遍历categories数组，把每个对象里的cat_id提取出来，生成一个新数组，你的例子里就会得到[1, 2]
2. .join(',')：把这个数组转成逗号分隔的字符串，最终结果就是"1,2"，正好符合data-cat属性需要的格式

修改后的完整模板代码 #

<template v-for="page in $props.data.pageInfo" >
  <div 
    class="overviewItem" 
    :key="page.uid" 
    :data-cat="page.categories.map(cat => cat.cat_id).join(',')"
  >
    <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有可能是空数组或者undefined的情况，可以加上可选链操作符避免报错：

:data-cat="page.categories?.map(cat => cat.cat_id).join(',') || ''"

这样当categories不存在时，data-cat会是空字符串，不会抛出错误~

内容的提问来源于stack exchange，提问作者Tanja K.