title: Vue JS: Looping through object inline attribute
body: <p>I am new to vue.js so this might be an easy question, but I unfortunatelly didnt come to a result on my own.</p>
  <p>So this is the basis of my template:</p>
  <pre><code>&lt;template v-for=&quot;page in $props.data.pageInfo&quot; &gt;
    &lt;div class=&quot;overviewItem&quot; :key=&quot;page.uid&quot; :data-cat=&quot; **looping through the object to get both cat_id's ** &quot;&gt;
      &lt;div v-for=&quot;(cat, index) in page.categories&quot; :key=&quot;index&quot; &gt;
        &lt;p v-if=&quot;index === 0&quot; class=&quot;subtitle&quot;&gt;
          {{ cat.title }}
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>{{ page.categories }} has the following values at the first .overviewItem:</p>
  <pre><code>[
  {
    &quot;cat_id&quot;: 1,
    &quot;title&quot;: &quot;Kategorie 1&quot;
  },
  {
    &quot;cat_id&quot;: 2,
    &quot;title&quot;: &quot;Kategorie 2&quot;
  }
  ]
  </code></pre>
  <p>The loop to get the subtitle works perfectly fine, but I cannot find any option on how to loop through this object so that i get the two values of data-cat attribute.</p>