Dialog 点击右上角x关闭之后，不能再次点击删除按钮显示dialog

[keyding]

以下是dialog的使用方式，有个问题就是，点击右上角x关闭dialog之后，不能再次点击删除按钮显示dialog。是不是我使用的方式有问题？thk.

version:

 "element-ui": "^1.0.8",
 "vue": "^2.1.0"

code:

<!-- Delete Button - Delete.vue -->
<template>
	<el-button type="danger" @click="showdialog">删除</el-button>
</template>

<script>
	export default {
		name: 'delete',
		data: function () {
			return {}
		},
		methods: {
			showdialog() {
				this.$emit('showdialog')
			}
		}
	}
</script>

<!-- Dialog - showTip.vue -->
<template>
	<el-dialog title="提示" v-model="dialogVisible" size="tiny" ref="dialog">
	  <span>这是一段信息</span>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="close">取 消</el-button>
	    <el-button type="primary" @click="close">确 定</el-button>
	  </span>
	</el-dialog>
</template>

<script>
	export default {
		name: 'showtip',
		props: ['visiable', 'closeDialog'],
		data: function () {
			return {}
		},
		methods: {
			close: function () {
				this.closeDialog();
			}
		},
		computed: {
			dialogVisible: function () {
				return this.visiable;
			}
		}
	}
</script>

<!-- 父组件 - Ele.vue-->
<template>
	<div>
		<deleteBtn @showdialog="showdialog"></deleteBtn>
		<showTip :visiable="showD" :closeDialog="closeDialog"></showTip>
  	</div>
</template>

<script>
	import deleteBtn from '../components/Delete.vue'
	import showTip from '../components/ShowTip.vue'

	export default {
		name: 'ele',
		data: function () {
			return {
				showD: false
			}
		},
		methods: {
			showdialog: function () {
				this.showD = true;
			},
			closeDialog: function () {
				this.showD = false;
			}
		},
		components: {
			deleteBtn,
			showTip
		}
	}
</script>

[Leopoldthecoder]

应该是因为 showTip.vue 里的 dialogVisible 被设置成了计算属性。把 dialogVisible 写在 data 里，然后 watch visible，变化时给 dialogVisible 赋值。

[keyding]

@Leopoldthecoder 按照你说的我修改了一下，但是点击右上角的X关闭dialog之后还是不能再次点击删除显示dialog，点击X，dialogVisible的值变为false，但是visiable此时并没有变化啊。

code:

<!-- Dialog - showTip.vue -->
<template>
	<el-dialog title="提示" v-model="dialogVisible" size="tiny" ref="dialog">
	  <span>这是一段信息</span>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="close">取 消</el-button>
	    <el-button type="primary" @click="close">确 定</el-button>
	  </span>
	</el-dialog>
</template>

<script>
	export default {
		name: 'showtip',
		props: ['visiable', 'closeDialog'],
		data: function () {
			return {
				dialogVisible: false
			}
		},
		methods: {
			close: function () {
				this.closeDialog();
			}
		},
		computed: {
			// dialogVisible: function () {
			// 	return this.visiable;
			// }
		},
		watch: {
			visiable: function (val, oldVal) {
				this.dialogVisible = val;
			}
		}
	}
</script>

[Leopoldthecoder]

是的。因为 Vue 2 里没有了双向绑定，父组件 <showTip :visiable="showD" :closeDialog="closeDialog"></showTip> 的 showD 并不会在子组件的 visible 改变后更新，所以一直是 true。你需要在子组件的 visible 改变后 emit 一个事件，然后在父组件监听这个事件，同步改变 showD 的值。

[keyding]

@Leopoldthecoder 明白了，谢谢。