Vue父组件传参数给子组件时,页面崩溃或者报undefined或者数据为空或者执行了两遍

1. 原因

  1. 请求是异步的,当父组件开始请求数据的时候,数据还在请求中的时候子组件已经渲染完毕,所以这个时候的子组件数据是空的,并且使用数据对象里面的某个值时会报undefined。
  2. 而当父组件的数据请求完毕,把数据发给子组件时,子数据监听到数据发生了变化,所以数据又接收了一遍,又渲染了一遍。

2、解决方案

  1. 在JavaScript中判断这个参数的长度或类型,当参数长度>0或者类型不为undefind的时候执行相对应操作。

    if(this.commentInfo.length > 0) return this.commentInfo.user.uname
    
  2. 在html中进行v-if判断,当条件符合时才开始渲染

    <div v-if="commentInfo.length > 0">
      <div class="detail-comment">
        ...
      </div>
    </div>
    
Logo

前往低代码交流专区

更多推荐