v-if渲染问题——（未完待续）

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

[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 - 真假都渲染组件

v-if渲染问题——（未完待续）

猜你喜欢