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

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呢?

阅读 18.2k
5 个回答

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

新手上路,请多包涵

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

新手上路,请多包涵

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(); //表单重置

},

两个解决方案

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


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

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

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

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