Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空

一、问题

1、input 赋值后表单提交却为空

在调用接口将返回的值赋在表单的 input 上或者子页面传递数值给父页面form表单model元素后，提交表单，明明值已经赋上去了，结果提交后显示的该值为空。具体看以下代码：

<el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label="司机ID" prop="driverId"><el-input v-model="form.driverId" placeholder="点击选择司机" readonly @focus="driverIdSelected"><i slot="prefix" class="el-icon-search el-input__icon" /></el-input></el-form-item><el-form-item label="关联车辆ID" prop="vehicleIds"><el-input v-model="form.vehicleIds" placeholder="点击选择车辆" readonly @focus="vehicleIdsSelected"><i slot="prefix" class="el-icon-search el-input__icon" /></el-input></el-form-item></el-form>

rules: {driverId: [{ required: true, message: "司机不能为空", trigger: "blur" }],vehicleIds: [{ required: true, message: "车辆不能为空", trigger: "blur" }],}

/** 司机页面选择之后回调设置选择司机实体 */changeRelatedDriver:function(data){if(data==""){return false;}this.form.driverId=data;this.driverOpen = false;},

二、原因

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

因此，Vue实例创建时，driverId.属性名并未声明，因此Vue就无法对属性执行 getter/setter 转化过程，导致driverId属性不是响应式的，因此无法触发视图更新

三、解决方案

使用使用Vue的全局API: $set()赋值：

this.$set(this.form, 'vehicleIds', data);

不要直接使用this.form.driverId=data，赋值会无效

/** 司机页面选择之后回调设置选择司机实体 */changeRelatedDriver:function(data){if(data==""){return false;}//this.form.driverId=data;this.$set(this.form, 'driverId', data);this.driverOpen = false;},

注意第二个属性参数，要用引号，否则无效

Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空相关推荐

vue.js表格赋值_vue.js input框之间赋值方法
如下所示: demo.html Index Page 测试 {{ result1 }} 测试 {{ result2 }} demo.js new Vue({ el: "#demo" ...
vue.js html 属性赋值,vue.js input框之间赋值方法
vue.js input框之间赋值方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue.js input框之间赋值方法,编程之家小编 ...
使用CORRESPONDING mapping把内表A的指定字段赋值给内表B的指定字段？
#如何把内表A的指定字段赋值给内表B的指定字段? 一般两个内表的赋值 1.如果是结构完全一样使用: A = B[]. 若是结构有些一样有些不同那就是使用 MOVE-CORRESPONDING,但是它只 ...
用exp无法导出空表解决方法/用exp导出数据时表丢失原因
用exp无法导出空表解决方法/用exp导出数据时表丢失原因最早的一次使用oracle 11g导出数据发现有的表丢失了,感觉莫名其妙的,后来终于找到原因了. 找到问题以后,再看看解决方案. 11GR2 ...
vue给input框属性赋值的方法
在Vue中,可以使用v-model指令实现双向数据绑定,让输入框的值与组件的数据属性保持同步.这里是一个简单的例子创建一个Vue实例: const app = new Vue({el: '#app ...
如何在html的form提交时排除某些input field的内容
在Html的form点击提交时,form内所有Input filed的内容,只要是有name属性的,并且没有disabled属性的,都会被提交,即通过网络发送到指定的URL. 如:下面的html代码显 ...
number——input新属性，提交时自动检测数字格式，大小
提交时自动检测数字格式,大小: 可编辑手动输入,也可以点击上下键调节大小 <!DOCTYPE html> <html><head><meta charset= ...
jsp里面的input的值吗_一个jsp页面中的input框向另一个jsp页面的input框传值
a.jsp 查询button> var text = $("#name").val(); window.location.href='b.html?name='+text; ...
php提交表单显示错误,php – 在提交注册表单时使用jQuery显示错误
你需要修好几件事情. >首先,处理注册过程的文件不应该是与表单相同的文件. >它纯粹用于处理数据,因此不能使用头("Location:login.php")直接重定向浏 ...

Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空

Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空相关推荐

最新文章

热门文章

Vue form表单input框 手动赋值 提交时 表单input值没有生效 验证仍然是空

Vue form表单input框 手动赋值 提交时 表单input值没有生效 验证仍然是空相关推荐

最新文章

热门文章

Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空

Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空相关推荐