Project scene
Demand: desired App.vueclick button impressions EditUserDialog.vueinvoked when the playing box and stuffing data block in the form of shells, the shells closed box resetFieldsmethod form field reset to the initial value
src/App.vue
<template>
<div id="app">
<edit-user-dialog ref="editUserDialog"></edit-user-dialog>
<el-button type="primary" @click="handleClick">弹框</el-button>
</div>
</template>
<script>
import EditUserDialog from './components/EditUserDialog';
export default {
name: 'App',
components: {
EditUserDialog,
},
methods: {
handleClick() {
this.$refs['editUserDialog'].getDetails();
},
},
};
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/components/EditUserDialog.vue
<template>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="listenDialogClose">
<el-form :model="editForm" :rules="editFormRules" ref="editForm" class="demo-editForm">
<el-form-item prop="username">
<el-input v-model="editForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import axios from 'axios';
export default {
name: 'EditUserDialog',
data() {
return {
dialogVisible: false,
editForm: {
username: '',
},
editFormRules: {
username: [{
required: true, message: '请输入活动名称', trigger: 'blur' }],
},
};
},
methods: {
async getDetails() {
// 请求数据并赋值给 editForm
const {
data: {
username },
} = await axios.get('/data.json');
this.editForm.username = username;
// 展示弹框
this.dialogVisible = true;
},
listenDialogClose() {
this.$refs['editForm'].resetFields();
},
},
};
</script>
public/data.json
{
"username": "ifer"
}
Problem description
Closed box shells found in data editForm.usernameand does not reset to the initial value (i.e., an empty string), view the document on resetFields illustrating a method of: resetting the entire form, all the field values reset to the initial value and correction removed The result of the test is hard to understand!
Cause Analysis
…, I found the following sentence when looking at the Dialog component
The content of the Dialog is rendered lazily, that is, the default slot passed in will not be rendered to the DOM before being opened for the first time. Therefore, if you need to perform DOM operations or get the corresponding components through ref, please do it in the open event callback.
Dawu, the true meaning of the initial value is the value before the Form component is rendered !
Look at the following code again, since the content of the Dialog is rendered lazily, the real rendering of the Form component is at #2, and the initial value has been changed to username at #1 before rendering , so even if it is called when the popup is closed resetFields, editForm.usernameThe data is stillusername
async getDetails() {
const {
data: {
username } } = await axios.get('/data.json');
// #1
this.editForm.username = username;
// #2
this.dialogVisible = true;
}
The solution is very simple, first display the bullet box and then perform the assignment operation, and the code at #2 can be advanced.