vue: 父组件给子组件传递数据,子组件接收到了,但是报错,怎么解决?

vue-dev --报错
vue-dev 点击后获得对象

回答:

请把代码贴全撒

回答:

clipboard.png

props里面驼峰写法的属性在html里面需要转换成-分割的属性,
所以edit-panel的currentCardInfo修改如下

<edit-panel 
    ...
    :current-card-info="cardInfo"
    ...
    >
</edit-panel>

回答:

{{currentCardInfo.values && currentCardInfo.values[1].value}}

回答:

子组件中使用

props:{
    currentCardInfo:Object
}

来获取父组件传递的属性值

回答:

由于你{{currentCardInfo.values[1].value}}中,currentCardInfo.values未定义,所以对于未定义的currentCardInfo.valuescurrentCardInfo.values[1]无法获取到,所以报这个错误,解决方法是:在访问currentCardInfo.values[1]数据之前先判断一下currentCardInfo.values是否存在:

{{currentCardInfo.values && currentCardInfo.values[1].value}}

如果currentCardInfo.values不存在,那么,后面的currentCardInfo.values[1].value就不会被运行到。

Update

你初始化的时候,currentCardInfo是字符串,所以根本不存在currentCardInfo.values,而初始化时候就会渲染一次`{{currentCardInfo.values[1].value}}模板,此时由于currentCardInfo.values未定义,所以currentCardInfo.values[1]无法访问。

修改方案1:
见上面的修改方案

修改方案2:

{{(currentCardInfo.values || [])[1].value}}

回答:

在任何要访问 currentCardInfo.values[1] 之前都判断一下,currentCardInfo 和 currentCardInfo.values 是否合法

也可以使用计算属性来减少重复代码:

computed: {
  currentCardInfoValues () {
    return this.currentCardInfo && this.currentCardInfo.values && this.currentCardInfo.values[1]
  }
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注