今天在使用vue做项目的时候遇到了一个错误，不断尝试后终于找到了解决方法，顺便举一反三一波

错误信息

错误及其解决方法

我给一个组件的子组件传递了一个对象,它的结构大概是这种形式(goods里有一个shopInfo对象，shopInfo对象里有一个数组)

1
2
3
4
5
6
7

goods：{
    ItemInfo：{...},
    shopInfo:{
            services:[obj1,obj2,obj3,obj4]
        },
    ...
}

obj4是一个对象，里面有一个属性name，现在，我在子组件中想使用这个name属性,就出现了上面的报错提示，但是奇怪的是页面中成功显示了这个name

1

<span>{{goods.shopInfo.services[goods.shopInfo.services.length-1].name}}</span>

先说解决报错的方法,给span加上v-if判断goods.shopInfo.services的存在

1

<span v-if="goods.shopInfo.services">{{goods.shopInfo.services[goods.shopInfo.services.length-1].name}}</span>

举一反三

子组件接受到父组件传入值的时间

为了探寻报错的原因，我在子组件的生命周期函数created,mounted,updated分别console.log(goods.shopInfo.services),结果只有updated函数中打印出了这个对象，其余两个都是undefined,同样的console.log(goods)只有updated里访问到了这个对象。

以上log说明子组件接受到父组件props来的对象发生在mounted之后！！

Vue的mustache语法里的特殊符号[]

为什么html中{{goods.shopinfo.services}}没有问题而{{goods.shopinfo.services[goods.shopInfo.services.length-1].name}}就报错呢？

原因就出在这个[]里面，页面在数据更新的时候会替换掉{{}}，但是更新之前{{}}含有[]符号，浏览器会直接进行解析，而goods.shopInfo.service还不存在，所以根本没有length，故发出警告,页面更新之后length存在，于是数据正常更新出来

由于现在也是刚刚开始熟悉vue，对底层原理了解还不是很深入，如果这段写错了，还请批评指正，在下方给我留言，学习学习