js函数传入形参对象后修改属性不生效

Question

我想把整个dialog作为对象传给弹框显示和隐藏方法，因为后面有可能有其他的表单弹框，我不想重复写显隐方法。

// 添加特权用户表单
            addMasterUserForm:{
                // 表单数据
                formData:{
                    sapNum:'',
                    user:'',
                },
                // 弹框显隐
                dialogVisible:false,
                // 表单验证
                rules:{
                    sapNum: [
                      { required: true, message: "请输入工号", trigger: "blur" },
                    ],
                    user: [
                      { required: true, message: "请输入姓名", trigger: "blur" },
                    ],
                },
                
            },

然后为什么当我点击查询按钮后，往显示弹框方法传入弹框对象，然后在里边修改形参的dialogVisible为true后，弹框还是不显示？打印后发现修改不生效，但是形参obj和上面声明的addMasterUserForm是全等为true的啊

 showDialog(obj){
            console.log(obj);
            obj.dialogVisible = true //不生效
            // this.$set(obj,'dialogVisible',true) 不生效
            console.log(obj===this.addMasterUserForm); //true
        },

<!-- 新增特权用户弹框 -->
        <el-dialog
          title="新增特权用户"
          :visible.sync="addMasterUserForm.dialogVisible"
          width="50%"
          :before-close="closeDialog(addMasterUserForm)"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          v-dialogDrag
          >
          <el-form
            :model="addMasterUserForm.formData"
            :rules="addMasterUserForm.rules"
            label-width="60px"
            ref="addMasterUserForm"
          >
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="工号" prop="sapNum">
                  <el-input v-model="addMasterUserForm.formData.sapNum"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="姓名" prop="user">
                  <el-input v-model="addMasterUserForm.formData.user"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog(addMasterUserForm)">取消</el-button>
            <el-button type="primary" @click="save(addMasterUserForm)">保存</el-button>
          </span>
        </el-dialog>

我发现当我往dialog中添加before-close属性后就没法打开弹框，这是为什么？
:before-close="closeDialog(addMasterUserForm)"
codepen例子
https://codepen.io/hongsir12/...

Answer 1

可以吧你代码在 jsrun 或者 codepen 里面写一个重现的列子吗
--------------2022年5月6日11:52:10---------------
已修改
原因是因为 :before-close="closeDialog(addMasterUserForm)"
这里得到的参数是 closeDialog执行后的参数 也就是 undefined
所以吧closeDialog方法改为

 closeDialog(obj){
            return () => {
              obj.dialogVisible = false
            }
            // this.$refs[obj].resetFields()
        },

完整代码如下

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <el-button type="primary" @click="showDialog(addMasterUserForm)" >新增</el-button>
    <el-dialog
          title="新增特权用户"
          :visible.sync="addMasterUserForm.dialogVisible"
          width="50%"          
          :before-close="closeDialog(addMasterUserForm)"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          >
          <el-form
            :model="addMasterUserForm.formData"
            :rules="addMasterUserForm.rules"
            label-width="60px"
            ref="addMasterUserForm"
          >
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="工号" prop="sapNum">
                  <el-input v-model="addMasterUserForm.formData.sapNum"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="姓名" prop="user">
                  <el-input v-model="addMasterUserForm.formData.user"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          
        </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 添加特权用户表单
            addMasterUserForm:{
                // 表单数据
                formData:{
                    sapNum:'',
                    user:'',
                },
                // 弹框显隐
                dialogVisible:false,
                // 表单验证
                rules:{
                    sapNum: [
                      { required: true, message: "请输入工号", trigger: "blur" },
                    ],
                    user: [
                      { required: true, message: "请输入姓名", trigger: "blur" },
                    ],
                },
                
            },
    };
  },
  methods: {
    showDialog(obj){
            obj.dialogVisible = true
            console.log(obj);
        },
    closeDialog(obj){
            return () => {
              obj.dialogVisible = false
            }
            // this.$refs[obj].resetFields()
        },
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>

</style>