在專案中，調介面的時候，獲取資料總是報錯：

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