Vue 数组中出现[ob: Observer]无法取值遍历
时间: 2024-01-06 10:07:09 浏览: 117
vue遍历对象中的数组取值示例
在 Vue 中,当一个数据属性被观察时,它会被转换成一个 Observer 对象。这个 Observer 对象会将数组转换成一个拥有特殊行为的数组,以便能够检测到数组的变化。这个 Observer 对象会被添加到数组中,所以当你遍历数组时,你会看到这个 [ob: Observer]。
如果你想要遍历一个被观察的数组,你需要使用 Vue 提供的一些数组方法,如 push、pop、shift、unshift、splice、sort、reverse。这些方法会触发数组的变化,从而让 Observer 对象能够检测到数组的变化并更新视图。
例如,你可以使用 Vue 的 v-for 指令来遍历一个数组:
```
<template>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['apple', 'banana', 'cherry']
};
}
};
</script>
```
在这个例子中,我们使用 v-for 指令来遍历 list 数组,并将每个元素渲染成一个 li 标签。由于我们使用了 Vue 提供的数组方法来修改 list 数组,所以 Observer 对象能够检测到数组的变化并更新视图。
阅读全文