Vue自定义dialog组件绑定v-model后无法正常关闭隐藏问题咨询

根因及对应修复方式 #

• 父组件语法错误修复
  你提供的父组件代码中data方法定义存在语法错误，结束位置多了多余的右括号，会导致组件响应式属性初始化异常，showItemChooser赋值后无法触发视图更新。
  修正前错误代码：

data() {
    return {
        showItemChooser: false,
    }
}),

修正后代码：

data() {
    return {
        showItemChooser: false,
    }
},

• 子组件状态同步修复
  子组件rowClick方法仅触发了选中事件，没有同步更新Dialog绑定的显示状态，会导致父子组件状态不一致，弹窗无法正常关闭。修改子组件rowClick方法如下：

methods: {
   rowClick() {
     const clicked_item = // 此处保留你原有的选中项获取逻辑
     this.$emit('onItemSelected', clicked_item);
     this.show = false // 新增该行，触发input事件同步父组件绑定值
   }
}

• 时序问题兼容修复
  如果修改后仍存在无法关闭的问题，可在父组件赋值时添加$nextTick保证DOM更新时序正确，也可使用$set强制触发响应式更新：

onStockSelected(result) {
  let id = result.id;
  let name = result.name;
  this.$nextTick(() => {
    this.showItemChooser = false;
    // 上述代码无效时替换为下行代码
    // this.$set(this, 'showItemChooser', false)
  })
}

• 层级问题排查
  如果以上操作都完成后弹窗仍可见，检查页面是否存在多个弹窗叠加渲染的情况，调整v-dialog的z-index属性避免层级覆盖即可。

内容的提问来源于stack exchange，提问作者MichaB