NuxtJS (Vue) 中的循环输出错误数据

Question

我有以下数据：

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",
        }
    ]
}
]

我的循环执行以下操作：

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

仅输出：

IT Page1
EN Page2

但是（上面的循环）应该输出两种语言的所有数据，对吧？另外，我如何选择语言（静态或动态）？

Answer 1

您应该创建两个循环并使用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>