javascript - vue: 父组件给子组件传递数据，子组件接收到了，但是报错，怎么解决？

问题描述

点击每个卡片就可以看到了错误信息了

<p v-show='showParagraph' @click='switchInput' > {{currentCardInfo.values[1].value}} <span v-if='currentCardInfo.cardImage'><img :src=’currentCardInfo.cardImage’> </span> </p>

问题解答

请把代码贴全撒

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

<edit-panel ... :current-card-info='cardInfo' ... ></edit-panel>回答3：

{{currentCardInfo.values && currentCardInfo.values[1].value}}回答4：

子组件中使用

props:{ currentCardInfo:Object}

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

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

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

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

但是，我建议你把父组件中调用子组件的代码贴出来，方便进一步给出修改意见。