但是报错TypeError: Cannot read properties of undefined (reading '0')
时间: 2023-07-09 22:53:35 浏览: 182
这个错误通常表示您尝试从一个未定义的对象中读取数据。在这种情况下,它可能是因为在调用方法之前,`color` 数组还没有被正确地初始化。
为了避免这个错误,您可以使用 Vue 的生命周期钩子函数之一来初始化数据。例如,在 `created` 钩子函数中初始化数组,如下所示:
```html
<template>
<div>
<p>{{ getPrice() }}</p>
</div>
</template>
<script>
export default {
data() {
return {
color: null
}
},
created() {
this.color = [
{ id: 1, name: 'red', price: 10 },
{ id: 2, name: 'blue', price: 20 },
{ id: 3, name: 'green', price: 30 },
{ id: 4, name: 'yellow', price: 40 },
]
},
methods: {
getPrice() {
if (this.color && this.color.length > 0) {
return this.color[0].price
}
return 0
}
}
}
</script>
```
在这个例子中,我们在 `created` 钩子函数中初始化了 `color` 数组。在 `getPrice` 方法中,我们首先检查 `color` 数组是否已经被正确地初始化。只有在数组不为空时,我们才会返回第一个数据的 `price` 属性值。如果数组为空,我们将返回 0。这可以避免在数组未定义时出现错误。
阅读全文