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