Vue 动态绑定v-model

需求：在后台设置简版动态表单，在前端用动态表单提交数据。

从后台数据库中获取的表单信息为

[{label:'用户名',key:'userName',type:'input'},{label:'电话号码',key:'phoneNum',type:'input'}]

前端代码

export default {
  data() {
    return {
      applyTemps:[],
      ruleForm:{}
    }
  },
  porps:['applyInfo'],
  created(){
    // applyTemp 为数据库中保存的模板，已json保存
    this.applyTemps = eval(this.applyInfo.applyTemp);
      this.applyTemps.forEach((item,index)=>{
        // 使用$set为对象添加响应式 property
        this.$set(this.ruleForm,item.key)
      });
  }
}

<el-form>
  <el-form-item :label="temp.label" :prop="temp.key" v-for="(temp,index) in applyTemps">
      <el-input v-model="ruleForm[temp.key]"></el-input>
  </el-form-item>
</el-form>

 

参考资料见 深入响应式原理