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

我想把整个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/...

阅读 2.6k
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题