一、问题

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;
    },

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