道具期间道具变得不确定

Question

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

<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是父组件的props值。

这是编译到网页后的结果。

您可以看到notes是一个数组，并显示在p个元素中。

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

是什么使notes不确定？

Answer 1

装入子组件时，无法访问

'notes'。因此，vue在渲染期间无法访问所需的值。

只需在将模板作为道具传递到子组件的任何地方添加参考保护

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

Answer 2

道具在组件渲染完成后才可用，您可以使用v-if，并且不会出现错误