javascript - vue: The parent component passes data to the child component, and the child component receives it, but reports an error. How to solve it?

Question

Click on each card to see the error message

<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

Please post all the code

Answer 2

The attributes written in camel case in props need to be converted into - divided attributes in html,
so the currentCardInfo of edit-panel is modified as follows

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

Answer 3

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

Answer 4

Used in subcomponents

props:{
    currentCardInfo:Object
}

To get the attribute value passed by the parent component

Answer 5

Because in your {{currentCardInfo.values[1].value}}, currentCardInfo.values is not defined, so for undefined currentCardInfo.values, currentCardInfo.values[1] cannot be obtained, So when this error is reported, the solution is: before accessing the currentCardInfo.values[1]data, first check whether currentCardInfo.values exists:

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

If currentCardInfo.values does not exist, then the following currentCardInfo.values[1].value will not be run.

However, I suggest you post the code that calls the child component in the parent component so that you can provide further modification suggestions.