使用Vue JS访问多维数组

Question

How can I access properties in objects inside multidimensional arrays using v-for with VueJS?

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

Trying to print it like:

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

Can only print the fruitname, can't access the property in the array inside the array.

Answer 1

Use 0 index to get value since it's property of nested object inside an array.

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