Vue.js - 保持活动组件 - 下一个勾选错误

Question

说明

我正在尝试利用vue-js 2.3 的keep-alive 功能，所以我的AJAX 调用只进行一次。

问题

我第二次尝试打开popup 组件时收到此错误：

nextTick 中的错误：“TypeError: Cannot read property 'insert' of undefined”

TypeError: 无法读取未定义的属性“插入”

步骤

点击按钮显示弹窗

等待一秒钟

关闭弹窗

再次点击按钮

https://jsfiddle.net/4fwphqhv/

最小复制示例

<div id="app">
  <button @click="showDialog = true">Show Component PopUp</button>
  <keep-alive>
      <popup v-if="showDialog" :show-dialog.sync="showDialog"></popup>
  </keep-alive>
</div>

<template id="popup">
    <el-dialog :visible.sync="show" @visible-change="updateShowDialog">{{asyncData}}</el-dialog>
</template>


Vue.component('popup', {
  template: '#popup',
  props : ['showDialog'],
  data(){
    return {
        show: this.showDialog,
      asyncData: "Loading please wait"
    }
  },
  methods: {
   updateShowDialog(isVisible) {
       if (isVisible) return false;
       this.$emit('update:showDialog', false )
   }
  },
   created:function (){
    const _this = this
    setTimeout(() => _this.asyncData = 'Async Data was loaded' , 1000)
  },
});

var vm = new Vue({
  el: '#app',
  data: {
    showDialog: false,
  },
});

弹窗组件的真实代码

<template>
    <el-dialog title="Order in progress" size="large" :visible.sync="show" @visible-change="updateShowLoadOrder"></el-dialog>
</template>

<script>
  let popUpData;
  export default {
    name: '',
    data () {
      return {
        ordersInProgress: [],
        show: this.showLoadOrder
      }
    },
    props: ['showLoadOrder'],
    methods: {
      updateShowLoadOrder (isVisible) {
        if (isVisible) return false;
        this.$emit('update:showLoadOrder', false)
      }
    },
    created () {
      const _this = this;
      if (!popUpData) {
        axios.get('api/mtm/apiGetOrdersInProgress').then((response) => {
          _this.ordersInProgress = popUpData = response.data;
        });
      } else {
        this.ordersInProgress = popUpData;
      }
    }
  }
</script>

Answer 1

好的。所以你的问题是错误的生命周期钩子。

如果您将 created 更改为 activated... 它应该可以工作。它在你的 JS 小提琴中对我有用。

activated:function (){
    setTimeout(() => this.asyncData = 'Async Data was loaded' , 1000)
}

还有另外两个钩子，已激活和已停用。这些是用于保持活动的组件，这个话题超出了本文的范围。只要说它们允许您检测包装在标签中的组件何时打开或关闭就足够了。您可以使用它们为您的组件获取数据或处理状态更改，从而有效地按照 created 和 beforeDestroy 进行操作，而无需重新构建完整的组件。

来源：here