1、问题:input 赋值后表单提交却为空
代码如下
<el-form-item label="场所ID" prop="placeId">
<el-input
readonly
v-model.trim="form.placeId"
@focus="addplace('placeId', 'insideAreaCode')"
placeholder="所属场所"
>
<el-button
slot="append"
@click.prevent="addplace('placeId', 'insideAreaCode')"
icon="el-icon-search"
></el-button>
</el-input>
</el-form-item>
从列表选择一条数据后进行赋值,提交表单,明明值已经赋上去了,结果提交后显示的该值为空
confirm(){
if(!this.templateRadio){
this.$message.error("请选择");
}else{
this.form.placeId=this.templateRadio.placeId; //赋值
this.dialogPlaceVisible=false;
}
},
2.原因:根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
因此,Vue实例创建时,placeId.属性名并未声明,因此Vue就无法对属性执行 getter/setter 转化过程,导致placeId属性不是响应式的,因此无法触发视图更新
3.解决方案
(1)readonly触发不了blur事件,可以改成change事件
rules: {
placeId: [{ required: true, message: "请输入场所ID", trigger: "change"}],
},
(2)form的placeId给个初始值
form: {
placeId:""
},
(3)使用使用Vue的全局API: $set()赋值
this.$set(this.form, ‘vehicleIds’, data); (注意第二个属性参数,要用引号,否则无效)
confirm(){
if(!this.templateRadio){
this.$message.error("请选择");
}else{
// this.form.placeId=this.templateRadio.placeId;
this.$set(this.form,'placeId', this.templateRadio.placeId); //正确赋值
this.dialogPlaceVisible=false;
}
},