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

Question

描述

我正在尝试利用keep-alive的{​​{1}}功能，因此我的vue-js 2.3电话只进行一次。

问题

我第二次尝试打开AJAX组件时出现此错误：

  

nextTick出错：“TypeError：无法读取未定义的属性'insert'”

     

TypeError：无法读取未定义

的属性“insert”

步骤

点击按钮显示弹出窗口

等一秒

关闭弹出窗口

再次点击按钮

https://jsfiddle.net/4fwphqhv/

最小再现示例

popup

弹出组件的实际代码

<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,
  },
});

Answer 1

确定。所以你的问题是生命周期错误。

如果您将created更改为activated ......它应该有效。它在你的JS小提琴中为我做了。

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

还有两个其他挂钩，已激活和已停用。这些是针对保持活动的组件，这个主题超出了本文的范围。可以这么说，它们允许您检测包装在标签中的组件何时打开或关闭。您可以使用它们来获取组件的数据或处理状态更改，有效地表现为created和beforeDestroy，而无需进行完整的组件重建。

消息来源：here