Vuejs2 道具在使用过程中未定义

这是我的vue项目webpack的一部分

<template>
<div>
      <p>notes is: {{notes}}</p>
      <p>{{notes[0]}}</p>
      <Card :note="notes[0]"/>
      <Card :note="this.notes[0]"/>
</div>
</template>

<script type="text/javascript">
  import Card from './Card/Card.vue'
  export default {
    name: 'Card',
    props: ["notes"],
    components: {
      Card
    }
  }
</script>

注释是：{notes}

{{notes[0]}

从“./Card/Card.vue”导入卡
导出默认值{
姓名：'卡片'，
道具：[“注意事项”]，
组成部分：{
卡片
}
}

notes

是来自父组件的道具值

这是编译到网页后的结果

正如您所看到的，

notes

是一个数组，显示在p元素中

但当我尝试将其支撑到子组件时，浏览器会抛出错误： 无法读取未定义的属性“0”

是什么使得

notes

未定义

---

安装子组件时，无法访问“注释”。因此，vue无法在渲染期间访问所需的值

只要在模板中添加一个引用保护，只要将其作为道具传递给子组件即可

<Card :note="notes && notes[0]"/>

在呈现组件之前，道具不可用，您可以使用v-if，不会出现错误

您从何处获取笔记？因为您的应用程序在它们被填充之前访问它们，所以这是一个错误。