Vue.js - 保持活动组件 - 下一个滴答时出错 [英] Vue.js - Keep Alive Component - Error next Tick
问题描述
说明
我正在尝试利用 vue-js 2.3 的 keep-alive 功能，所以我的 AJAX 调用只进行一次.
问题
我第二次尝试打开 popup 组件时出现此错误:
nextTick 中的错误:TypeError:无法读取未定义的属性插入""
类型错误:无法读取未定义的属性插入"
步骤
点击按钮显示弹出窗口
等一秒钟
关闭弹窗
再次点击按钮
https://jsfiddle.net/4fwphqhv/
最小复制示例
<button @click=showDialog = true">显示组件弹出窗口</button><保持活力><popup v-if="showDialog";:show-dialog.sync=showDialog"></popup></保持活动><模板id=弹出窗口"><el-dialog :visible.sync="show";@visible-change="updateShowDialog">{{asyncData}}</el-dialog></模板>Vue.component('弹出窗口', {模板:'#popup'，道具:['showDialog']，数据(){返回 {显示:this.showDialog，asyncData:正在加载，请稍候"；}},方法: {updateShowDialog(isVisible) {如果(isVisible)返回false；this.$emit('update:showDialog', false )}},创建:函数(){const _this = 这个setTimeout(() => _this.asyncData = '异步数据已加载', 1000)},});var vm = new Vue({el: '#app',数据: {显示对话框:假，},});
弹窗组件的真实代码
<el-dialog title="订单进行中";大小=大":visible.sync="显示";@visible-change="updateShowLoadOrder"></el-dialog></模板><脚本>让 popUpData;导出默认{姓名: ''，数据 () {返回 {订单进度:[]，显示:this.showLoadOrder}},道具:['showLoadOrder']，方法: {updateShowLoadOrder (isVisible) {如果(isVisible)返回false；this.$emit('update:showLoadOrder', false)}},创建(){const _this = this;如果(！popUpData){axios.get('api/mtm/apiGetOrdersInProgress').then((response) => {_this.ordersInProgress = popUpData = response.data;});} 别的 {this.ordersInProgress = popUpData;}}}好的.所以你的问题是错误的生命周期钩子.
如果您将 created 更改为 activated...它应该可以工作.它在你的 JS 小提琴中对我有用.
激活:函数(){setTimeout(() => this.asyncData = '异步数据已加载', 1000)}还有另外两个钩子，激活的和停用的.这些用于保持活动的组件，这个主题超出了本文的范围.可以说它们允许您检测包装在标签中的组件何时打开或关闭.您可以使用它们来为您的组件获取数据或处理状态更改，从而有效地按照创建和销毁前的方式运行，而无需进行完整的组件重建.
来源:这里
Description
I'm trying to take advantage of the keep-alive functionality of vue-js 2.3 so my AJAX call is made only once.
Problem
The second time I try to open the popup component I get this error :
Error in nextTick: "TypeError: Cannot read property 'insert' of undefined"
TypeError: Cannot read property 'insert' of undefined
Steps
Click on the button to display the popup
Wait for one second
Close the popup
Click again on the button
https://jsfiddle.net/4fwphqhv/
Minimal reproduction example
<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,
},
});
Real code of the popup component
<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>
Ok. So your problem here is the wrong life-cycle hook.
If you change created to activated... it should work. It did for me in your JS fiddle.
activated:function (){
setTimeout(() => this.asyncData = 'Async Data was loaded' , 1000)
}
There are two other hooks, activated and deactivated. These are for keep-alive components, a topic that is outside the scope of this article. Suffice it to say that they allow you to detect when a component that is wrapped in a tag is toggled on or off. You might use them to fetch data for your component or handle state changes, effectively behaving as created and beforeDestroy without the need to do a full component rebuild.
SOURCE: here
这篇关于Vue.js - 保持活动组件 - 下一个滴答时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
