Vue “alert()“方法会导致使用.sync实现父子组件数据双向绑定无效

一、 源代码

1. 父组件对子组件的引用如下：

<template-selector :visible.sync="visible" ></template-selector>

2. 子组件代码如下：

<template><div slot="footer" class="dialog-footer"><el-button @click="handleCancel">取 消</el-button>{{visible}}<el-button type="primary" @click="handleConfirm">确 定</el-button></div>
</template><script>export default {props:{/* 是否可见 */visible: {type: Boolean,default: false,},},data() {return{},methods:{/** 处理取消操作 */handleCancel(){this.visible = false;//this.$emit('update:visible', false);},/** 处理确定操作 */handleConfirm(){this.visible = false;//this.$emit('update:visible', false);}},
}
</script>

二、问题

点击子组件的确认或取消按钮是visible改变了，但是父组件中没有同步改变。

三、问题原因

在父组件中，在对visible进行赋值修改的方法中，存在alert ，导致了数据同步失效，我也不知道为什么，如下代码：

handleStart(row){this.reset();const ids = row.id || this.ids;if(ids.length>1){this.visible=true;}else{alert("单个")}}

三、 解决办法
去掉