Vue.js 2.3 -元素UI对话框-同步和道具
Vue.js 2.3 -元素UI对话框-同步和道具
提问于 2017-05-30 23:53:41
我正在使用vue-js 2.3和element-ui。自从更新2.3 of vue-js和重新引入sync以来，情况发生了变化，我很难解决我的问题。
下面是jsfiddle：https://jsfiddle.net/7o5z7dc1/
问题
dialog只打开一次。当我关闭它时，会出现以下错误：
避免直接更改支柱，因为每当父组件重新呈现时，值都会被覆盖。相反，使用基于支柱值的数据或计算属性。道具变异："showDialog“
问题
我做错了什么？
我怎样才能解决目前的情况？
编辑
如果我正在创建一个data，我设法删除错误消息，但是dialog不再关闭
<div id="app">
<left-panel v-on:show="showDialog = true">></left-panel>
<popup v-if="showDialog":show-dialog.sync="showDialog"></popup>
</div>
<template id="left-panel-template">
<button @click="$emit('show')">Show Component PopUp</button>
</template>
<template id="popup">
<el-dialog :visible.sync="showDialog" @visiblechange="updateShowDialog">I am the popup</el-dialog>
</template>
Vue.component('left-panel', {
template: '#left-panel-template',
methods: {
},
});
Vue.component('popup', {
template: '#popup',
props : ['showDialog'],
methods: {
updateShowDialog(isVisible) {
if (isVisible) return false;
this.$emit('update:showDialog', false )
},
},
});
var vm = new Vue({
el: '#app',
data: {
showDialog: false,
},
methods: {
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-31 14:39:18
您可以通过创建道具的副本并对其进行变异来避免突变警告，而不是直接更改属性。
Vue.component('popup', {
template: '#popup',
props : ['showDialog'],
data(){
return {
show: this.showDialog
}
},
methods: {
updateShowDialog(isVisible) {
if (isVisible) return false;
this.$emit('update:showDialog', false )
},
},
});我还更改了模板，以正确处理visible-change事件。
<el-dialog :visible.sync="show" @visible-change="updateShowDialog">I am the popup</el-dialog>更新的小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44273644
复制相关文章
相似问题
腾讯云开发者
