element ui，Dialog嵌套表单后，在表单上设置ref属性后，弹出对话框时，输出this.$refs是个空Object

Question

vue组件代码如下

<template>
  <container>
    <el-row>
      <el-col :span="12">
        <el-button @click="alertDialog">弹出dialog</el-button>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogFormVisible" title="收货地址">
      <el-form ref="formValidate" :model="form" class="custom-form">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </container>
</template>
<script>
  import container from '../components/container';
  export default {
    data(){
      return {
        dialogFormVisible:false,
        formValidate:{},
        form:{
          name:'',
          region:'',

        }
      }
    },
    components:{
      container
    },
    methods:{
      alertDialog(){
        this.dialogFormVisible=true;
        console.log(this.$refs);
      }
    }
  }
</script>

最后方法 alertDialog里输出的结果：

请问我怎么在第一次就获得有效的this.$refs呢？

Answer 1

我的目的是使用form表单的 resetFields 方法，所以想用this.$refs来获得表单组件。
我自己解决了，就自问自答一发吧。应该是element ui 的原因，当Dialog显示的时候，嵌套的form表单和它没有同时间出现在dom中，所以取不到。最后我使用Dialog组件的close事件来完成了对表单的重置

Answer 2

大佬代码能详细点不，我困扰很久了 你的父组件是要定义到dialog外面吗？我试过把el-form放到外面还是不行

Answer 3

1、在取消按钮上添加事件
<el-dialog>

<el-form ref="passForm"></el-form>
<div slot="footer" class="dialog-footer">
    <el-button @click="canclePass(passForm)">取 消</el-button>
    <el-button type="primary" @click="savePass(passForm)">确 定</el-button>
</div>

</el-dialog>
2、点击dialog的取消按钮重置表单
canclePass(){

this.passForm.show = false; //dialog关闭
this.$refs.passForm.resetFields(); //表单重置

},

Answer 4

两个解决方案
一

this.$nextTick(()=>{
    this.$refs[formName]
})

二
把dialog + form 写道一个子组件种

分析：dialog首次渲染前 内部的ref是没有挂载的 要么等待渲染之后去取，要么通过子组件去取自己的ref

Answer 5

遇到了一模一样的问题，按理来说你点弹出框应该之前应该全部渲染完毕了，为什么第一次是一个空对象，生命周期还是怎么回事，晕晕晕 还有你上面说的，这种弹出框是打开的时候才渲染完毕吗？