最近又写bug了,点击按钮弹出一个对话框 提交内容,这里使用element UI中的dialog组件和form表单组件。第一打开可以正常输入内容,第二次打开就不可以输入了。
直接上代码:
<el-dialog
title="表单提交"
:visible.sync="editVisible"
v-if="editVisible"
width="650px"
:before-close="handleEditClose"
>
<el-form label-position="right" label-width="80px">
<el-form-item label="姓名">
<el-input
v-model="editForm.name"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input
v-model.number="editForm.age"
placeholder="请输入0~255的数字值"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" ">确 定</el-button>
</span>
</el-dialog>
关闭输入框的时候的回调。下面是正确的写法
当时也是为了偷懒 写出了如下问题代码
原因:data数据中没有默认值导致 v-model中找不到数据 就会导致输入框无法输入。
handleEditClose(){
this.editVisible = false;
//关闭弹窗之后清空
this.editForm = {
name: "",
age: "",
};
},
数据绑定的内容
editForm: {
name: "",
age: "",
},