Блог

Я новичок в 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 .

Используется .map для создания нового массива только cat_id из, а затем объединить их вместе с пробелом между ними:

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