[Vuejs]-Vue iterate over object with arrays

In your current code: datas.contents === undefined, as datas is the sections array and first you need to select which index you’re reading the object with contents from. datas[0].contents targets the first object’s contents for example. You can automatically loop through the sections array first, and then through the contents of each in order to automatically loop through the different section objects.

Assuming you want a new row for every ‘section’, this should work:

<div class="row" v-for="(section, sectionIdx) in datas" :key="'section-'+ sectionIdx">
  <div class="col" v-for="(content, contentIdx) in section.contents" :key="'section-' + sectionIdx + '-content-' + contentIdx">
    <h3>{{ content.title }}</h3>
    <p v-html="content.address"></p>
  </div>
</div>