在项目中,调接口的时候,获取数据总是报错:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'children' of undefined"

贴上部分代码

<el-popover
  v-if="listData.length > 0"
  ref="popover"
  placement="bottom"
  width="560"
  trigger="focus"
  popper-class="project-list">
  <el-scrollbar class="page-scroll">
    <div class="scroll-padding">
      <el-radio-group v-model="projectId">
        <el-radio v-for="item in listData" :key="item.id" :label="item.id">{{item.label}}</el-radio>
      </el-radio-group>
    </div>
  </el-scrollbar>
</el-popover>
<span v-show="listData.length === 0">未查找到该项目</span>

<script>
import { findPropertyList } from '@/api/user'
export default {
  data () {
    return {
      keyWords: '',
      listData: [],
      projectId: 1
    }
  },
  created () {
    this.search()
  },
  methods: {
    search () {
      let postData = {propertyName: this.keyWords}
      findPropertyList(postData).then(response => {
        this.listData = response.data
      })
    }
  }
}
</script>

在我的经验告诉我,什么关键字undefined,ctrl+c,然后ctrl+v复制到代码里面,就能找到问题所在位置了。燃鹅,这次并不管用。

百思不得其解,只能使用使用终结排除法:

分析报错提示mounted hook: 改生命周期,明显不行。

删减代码排出其他非报错模块,最后找到是上面这个模块报错了,并得出规律:使用elementUI中el-popover组件后,再使用v-if去控制渲染,最后接口获取渲染数据就会报错(接口的问题其实只起到数据获取延迟的作用,用setTimeout一样的效果)。

报错点找到了,原因是为什么还没理清楚(大胆猜测,渲染el-popover时候数据没及时跟上的原因)。不过只要打破上面规律中的三个点中的一个就可以了。

el-popover是实际项目需求,没得选,接口也不能删,最后,v-if完全是我脑抽抽了,居然用这个。

教训是v-if和v-show选择要谨慎。

v-if  ---- 真:渲染,假:不渲染

v-show - 真假都渲染组件

Logo

前往低代码交流专区

更多推荐