使用Vue JS访问多维数组

Question

如何使用带有VueJS的v-for访问多维数组中对象的属性？

var arr =[{"fruit": {"fruitName": "apple"}, "vegetable":[{"vegetableName": "carrot" }]}];

尝试打印它：

  <ul v-for="x in arr">
    <li>{{ x.fruit.fruitName }}</li>
    <li>{{ x.vegetable.vegetableName }}</li>
  </ul>

只能打印fruitname，无法访问数组内数组中的属性。

Answer 1

使用0索引获取值，因为它是数组内嵌套对象的属性。

<li>{{ x.vegetable[0].vegetableName }}</li>
<!--            --^^^--                 -->