使用 Vue JS 访问多维数组答案

【问题标题】：Access multidimensional array with Vue JS使用 Vue JS 访问多维数组
【发布时间】：2018-05-02 20:44:25
【问题描述】：

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

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，不能访问数组里面的数组属性。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：