Loop in NuxtJS (Vue) outputs wrong data

I have the following data:

export const myData = [
{
    id: 1,
    lang: "it",
    items: [
        {
            id: 1,
            title: "IT Page1",
        },
        {
            id: 2,
            title: "IT Page2",
        },
        {
            id: 3,
            title: "IT Page3",
        }
    ]
},
{
    id: 2,
    lang: "en",
    items: [
        {
            id: 1,
            title: "EN Page1",
        },
        {
            id: 2,
            title: "EN Page2",
        },
        {
            id: 3,
            title: "EN Page3",
        }
    ]
}
]

my loop does the following:

<ul v-for="(item, i) in myData" :key="i">
  <li>{{ item.items[i].title }}</li>
</ul>

and outputs only:

IT Page1
EN Page2

but (the loop above) should output all data for both languages, right? Also, how can i choose language (statically or dynamically)?

Answer

You should make two loops and render the selected language conditionally using v-if :

<div v-for="(item, i) in myData" :key="i">
 <template v-if="item.lang==='it'"> 
  <ul v-for="(subItem, j) in item.items" :key="j">
     <li>{{ subItem.title }}</li>
  </ul>
</template>
</div>

Advertisement

Answer