分析vue取数组值报错的问题

有时我们给子组件传递一个数组,在绑定到属性上,会出现错误:

看问题

我们来看下面的问题:

<template>
  <div>
         <img :src="goods.length>0 ? goods.[0].image :null" alt="" srcset="" width="100%">
  </div>
</template>

<script>
export default {
    name:'Floor1',
    props:{
        goods:Array
    },
}
</script>

<style>
</style>

但是,界面上图片已经加载正常了

为什么?

我们明明已经传递了数据了,为什么是null呢?
为什么是null,还能正确显示呢?
为什么正确显示还会报错呢?

这是因为,子组件create之时, props里的数据还没有读取, 此时渲染引擎监测到数据的绑定, 去寻找数据, 就会报错. 很快的组件初始化到了mount阶段,此时已经可以读取到props了,所以通过绑定系统,把数据渲染出来了

如何解决?

通过一个三元运算符来判断

<img :src="goods.length>0 ? goods[0].image :null" alt srcset width="100%" />