search

Home  >  Q&A  >  body text

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?

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>

大家讲道理大家讲道理2817 days ago763

reply all(5)I'll reply

  • 我想大声告诉你

    我想大声告诉你2017-06-28 09:26:14

    Please post all the code

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-06-28 09:26:14

    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>

    reply
    0
  • 欧阳克

    欧阳克2017-06-28 09:26:14

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

    reply
    0
  • 習慣沉默

    習慣沉默2017-06-28 09:26:14

    Used in subcomponents

    props:{
        currentCardInfo:Object
    }

    To get the attribute value passed by the parent component

    reply
    0
  • 我想大声告诉你

    我想大声告诉你2017-06-28 09:26:14

    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.

    reply
    0
  • Cancelreply