Vue中关闭dialog时销毁DOM、数据等
背景:今天在写Vue时遇到一个用element-ui的dialog时,里面用路由引用的其它页面。多个数据共用一个dialog,但是除了第一次点击的时候,触发了引用页面的created()里方法,无论再怎么点击其它数据的方法也无法触发created(),原因应该就是DOM已经渲染完毕不会再次渲染了,所以想要用其他数据就需要销毁一下。参考文章:https://blog.csdn.net/qq_...
·
背景:今天在写Vue时遇到一个用element-ui的dialog时,里面用路由引用的其它页面。
多个数据共用一个dialog,但是除了第一次点击的时候,触发了引用页面的created()里方法,无论再怎么点击其它数据的方法也无法触发created(),原因应该就是DOM已经渲染完毕不会再次渲染了,所以想要用其他数据就需要销毁一下。
参考文章:https://blog.csdn.net/qq_25135655/article/details/94400290
根据原文章可知此方法可用于多种情况导致dialog内数据无法刷新的问题。
<el-dialog title="添加" :visible.sync="addDialogVisible">
<el-tree :props="props" :load="lazyLoad" lazy show-checkbox>
</el-tree>
</el-dialog>
其实你已经想到了,就是隐藏dialog的时候要销毁这个dialog。 度娘后发现给dialog加v-if,在关闭dialog的时候将v-if设置为false这样el-tree会直接将其从DOM结构中抹除,到此问题解决。
修改后代码:
<el-dialog title="添加"
v-if="addDialogVisible"
:visible.sync="addDialogVisible">
<el-tree :props="props" :load="lazyLoad" lazy show-checkbox>
</el-tree>
</el-dialog>
更多推荐
已为社区贡献11条内容
所有评论(0)