但是报错TypeError: Cannot read properties of undefined (reading '0')

这个错误通常表示您尝试从一个未定义的对象中读取数据。在这种情况下，它可能是因为在调用方法之前，`color` 数组还没有被正确地初始化。

为了避免这个错误，您可以使用 Vue 的生命周期钩子函数之一来初始化数据。例如，在 `created` 钩子函数中初始化数组，如下所示：

<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。这可以避免在数组未定义时出现错误。