javascript - vue: 父元件給子元件傳遞數據，子元件接收到了，但是報錯，怎麼解決？

Question

點擊每個卡片就可以看到了錯誤訊息了

<p class="paragraph" title="Click to edit"
   v-show="showParagraph"
   @click="switchInput"
 >
    {{currentCardInfo.values[1].value}}
    <span v-if="currentCardInfo.cardImage">
        <img :src='currentCardInfo.cardImage'>
    </span>
 </p>

####

Answer 1

請把程式碼貼全撒

Answer 2

props裡面駝峰寫法的屬性在html裡面需要轉換成-分割的屬性，
所以edit-panel的currentCardInfo修改如下

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

Answer 3

雷雷

Answer 4

子組件中使用

props:{
    currentCardInfo:Object
}

來取得父組件傳遞的屬性值

Answer 5

由於你{{currentCardInfo.values[1].value}}中，currentCardInfo.values未定義，所以對於未定義的currentCardInfo.values，currentCardInfo.values[]所以要回報這個錯誤，解決方法是：在存取currentCardInfo.values[1]資料之前先判斷一下currentCardInfo.values是否存在：

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

如果

currentCardInfo.values不存在，那麼，後面的currentCardInfo.values[1].value就不會被運行。

但是，我建議你把父元件中呼叫子元件的程式碼貼出來，方便進一步給出修改意見。