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

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