点击打开弹窗按钮，才会从后端加载数据渲染弹窗组件，弹窗组件上点击确定或者取消按钮会关闭弹窗并清除数据，即每次打开页面都只能看到后端数据传过来的空白模板。下面的代码要怎么改？如果一个vue文件实现不了，两个是否可行，能否给出大概的代码？
尝试过放到mounted里只能拿一次数据，无法得到预想的效果。
```html
<template>
<div>
<el-button type="text" @click="tccDV1 = true" @opened="resetMb">弹窗</el-button>
<el-dialog v-if="tccDV1" title="提示" :visible.sync="tccDV1" width="30%" center>
<span>{{tanchu1}}</span>
<input v-model="tanchu1">
<span slot="footer" class="dialog-footer">
<el-button @click="tccDV1 = false">取 消</el-button>
<el-button type="primary" @click="tccDV1 = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tccDV1: false,
tanchu1: ''
};
},
methods: {
resetMb() {
console.log("开始为弹出组件加载数据");
let tc1 = require("../../../static/json/testtc1");
this.tanchu1 = tc1.testtc;
console.log("弹出组件1");
console.log(this.tanchu1);
}
}
}
</script>
```
el-dialog 不是有 destroy-on-close这个属性 你加上
https://element.eleme.cn/#/zh-CN/component/dialog#events
el-dialog有个open方法，每次打开弹窗都会调用此方法，在那里获取数据
<el-dialog
@open="open"
<el-button type="text" @click="openDialog" @opened="resetMb">弹窗
function openDialog() {
tccDV1 = true
resetMb()
}