Vue element-ui cannot get the elements in dialog when it is opened for the first time
I recently came into contact with vue and element.ui, and found that there is a problem with dialog in element.ui that I don"t know how to solve.
1. For example, I wrote a form component in dialog and set the ref to form,. When you open dialog, you need to enter the x line this.$ref ["form"]. Fields (), into the form component inside to reset the form.
2. It is now found that when you open dialog for the first time, this.$ref ["form"] closes dialog, for undefined, and is ready for use after the second opening.
3. Once an ajax request was written in the event of opening dialog, and the code for resetting the form was written in the success callback, and there was no problem.
4. It"s no use trying to use this.$nextTick (),.
I hope there will be some great gods to see if there is any solution. Crab
-Supplementary split line-
dialog section:
<el-dialog :visible.sync="dialogFormVisible" width="35%">
<span slot="title" class="el-dialog__title">{{dialogTitle}}</span>
<el-form :model="form" ref="roomForm" label-position="left" size="small">
...
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogFormVisible = false;$refs["roomForm"].resetFields();"> </el-button>
<el-button size="small" type="primary" @click="submitRoom("roomForm")"> </el-button>
</div>
</el-dialog>
Click event js Code:
modifyRoom(flag, data) {
let self = this;
self.dialogFormVisible = true; //dialog
...
// self.$refs[formName].resetFields(); //
}
is that my page will have both new and modified content, which is realized with the same dialog. If you click modify, you will fill the existing data into the form. If you click New, you will need to reset the form and restore the form to its original state, but the first time he clicked on New, he could not find the form element and cannot realize the resetFields event. As long as you open the dialog, once, you won"t make a mistake the second time.
but if I put the code that resets the form into the success callback function of the ajax request, it won"t go wrong the first time.
setTimeout (() = > {
self.$refs[formName].resetFields()
}, 0)
read it several times, brother, post your code
what did the landlord finally solve, ask for sharing
my chrome browser has no problem, there is this problem on IE, nextclick page is useless, how to solve
I suddenly found that the problem of my premise for such a long time is not over. I don't know if any other children's shoes have encountered the same problem. Now posting my solution is not the only one, but I have tried to have no problem now. I hope to solve the problems of other babies.
at the beginning, my pop-up window was written like this
html
:
<button @click="modifyRoom(0,null)" type="button" class="btn btn-block btn-primary"
style="width: 156px;position: absolute;right: 0">
</button>
:
<span @click="modifyRoom(room.id,room)">
</span>
:
<el-dialog :title="/" :visible.sync="dialogFormVisible" width="35%">
<el-form :rules="rules" :model="form" ref="roomForm" label-position="left" size="small">
....
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogFormVisible = false;$refs['roomForm'].resetFields();">
</el-button>
<el-button size="small" type="primary" @click="submitRoom('roomForm')">
</el-button>
</div>
</el-dialog>
methods:
:
modifyRoom(flag, data) {
let self = this;
self.dialogFormVisible = true;
self.submitFlag = flag;
self.$refs['roomForm'].resetFields(); //
if (flag == 0){
self.dialogTitle = "';
}else{
self.dialogTitle = "';
self.form.name = data.name;
self.form.state = data.state;
self.form.number = data.number;
self.form.remark = data.remark;
}
},
at this point, let's take a look at elementUI's interpretation of dialog
dialogdialogdom
dialogresetFieldsundefined
.
then tried several methods
1.
resetFields
$nextTick()
modifyRoom(flag, data) {
...
self.$nextTick(()=>{
self.$refs['roomForm'].resetFields();
})
if(...){
...
}else{
...
}
...
};
2
modifyRoom(flag, data) {
...
if(...){
self.$nextTick(()=>{
self.$refs['roomForm'].resetFields();
})
}else{
...
}
...
};
1
3
33
the final solution is to bring up the pop-up window data and create a new pop-up window vue file
to directly write the pop-up window object into a const (remember to export), then introduce the pop-up window object into the vue file
data in the page to be used, and then new the pop-up object directly, and then re-new it when you create it. Calling the resetFields method
when closing the pop-up window can solve this problem perfectly, and the reusability is also very strong. Just introduce it directly when you want to use it
:
<el-dialog :title="/" :visible.sync="dialogFormVisible" width="35%"
@close="$refs['roomForm'].resetFields();">
<el-form :rules="rules" :model="form" ref="roomForm" label-position="left" size="small">
....
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogFormVisible = false;$refs['roomForm'].resetFields();">
</el-button>
<el-button size="small" type="primary" @click="submitRoom('roomForm')">
</el-button>
</div>
</el-dialog>
import Vo from '../dialogForm.vue'
data(){
return {
dialogList:new Vo.dialogList();
}
},
methods:
modifyRoom(flag, data) {
let self = this;
self.dialogFormVisible = true;
self.submitFlag = flag;
if (flag == 0){
self.dialogTitle = "';
self.dialogList = new Vo.dialogList();
}else{
self.dialogTitle = "';
self.form.name = data.name;
self.form.state = data.state;
self.form.number = data.number;
self.form.remark = data.remark;
}
},
dialogForm.vue
<script>
const dialogList = () => {
return {
name:'',
state:'',
number:'',
remark:'',
}
}
export default {
name: 'dialog-form',
dialogList
}
</script>
if you write in this way, you can solve the problem I raised before. Thank you for the inspiration given to me by the lazy technician classmate. I hope I can give some help to those who encounter this problem in the future.
