vue遍历对象数组取到的不是对象值，是整个对象？

Question

对象数组

data :{
    arr:[{a:"aaa"},{a:"bbb"}]
    }`

html里

<div v-for="(val,key,index) in arr">
    {{val}},{{key}},{{index}}
</div>

val显示的是

       {a:"aaa"}
       {a:"bbb"}

key显示的是下标数 0 1
index无值
web开发模式下看arr是

下标做对象的key，整个对象是value
现在想取每个对象的key和value怎么写？

Answer 1

<div v-for="(val) in arr">
    {{ val['a'] }}
    // 或者遍历对象
    <div v-for="(value, key) in val">
     {{ value }}  {{ key }}
    </div>
</div>

Answer 2

你这遍历的是数组，数组里面存的是对象，那 val 肯定就是对象了。
如果遍历的是：
status:{a:"aaa",b:"bbb"}，
这样写：
<el-button v-for="(value,name,index) in status" :key="value">{{ name }}:{{ value }},{{ index }}</el-button>
结果就是你预期的：