v-model 循环中绑定动态变量

最近遇到这么个场景的问题，一个页面中数量不定的报表，而每个报表不同点只是字段不同以及生产报表的地址不同而已，这个时候可以使用v-for去动态生成组件。字段也是动态生成，这时候就遇到了问题

例如效果:以下页面都是通过json数据动态构造生成

json格式:

 list: [
        {
          title: "库存业务>出入库详情",
          propList: [
            {
              prop: "customerCode",
              label: "客商编码"
            },{
              prop: "customerName",
              label: "客商名称"
            },{
              prop: "productCode",
              label: "产品编码"
            },{
              prop: "productName",
              label: "产品名称"
            },{
              prop: "wareHouseCode",
              label: "仓库编码"
            },{
              prop: "wareHouseName",
              label: "仓库名称"
            }
          ],
          obj:{},
          url:""//生成结果的url
        },
        {
          title: "库存业务>实时库存",
           propList: [
            {
              prop: "supplierCode",
              label: "供应商编码"
            },{
              prop: "supplierName",
              label: "供应商名称"
            },{
              prop: "productCode",
              label: "产品编码"
            },{
              prop: "productName",
              label: "产品名称"
            },{
              prop: "wareHouseCode",
              label: "仓库编码"
            },{
              prop: "wareHouseName",
              label: "仓库名称"
            }
          ],
          obj:{},
          url:""//生成结果的url
        }
      ]

组件模块

<template>
  <div class="feed-container">
    <el-col :span="12" v-for="(component,index) in componentList" :key="index">
      <div class="card">
        <div class="title">
          <span>{{component.title}}</span>
        </div>
        <div class="card-body">
          <el-form>
            <el-col :span="12" v-for="(item,i) in component.propList" :key="i">
              <el-form-item :label="item.label">
                <el-input size="mini" v-model="component.obj[item.prop]"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div class="create">
          <el-button size="mini" type="primary" @click="create(component.obj)">生 成</el-button>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    feedBackComponents: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      componentList: [],
    };
  },
  created() {
    this.componentList = [ ...this.feedBackComponents ];
    this.componentList.forEach(item => {
      item.propList.forEach(items => {
        item.obj[items.prop] = "";//构造输入框的字段
      });
    });
  },
  methods: {
    create(item) {
      console.log(item);
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  margin: 10px;
  height: 250px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  &:hover {
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .title {
    padding: 10px;
    background: #108ee9;
    color: #fff;
    font-size: 14px;
  }
  .card-body {
    background: #fff;
    margin-top: 20px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .create{
      position: absolute;
      bottom: 10px;
      right: 10px;
  }
}
</style>

以上可以看到预留一个Obj对象用来储存propList中的prop的值作为key（属性），而vue中双向绑定绑定的事属性而不是值。所以这就是为什么如果直接使用item.prop去绑定每个字段的值只是显示值而已的原因。因为这个时候绑定的其实是prop。其中的customerCode和customerName只是prop的值而已

所以构建出来obj这个对象为:

obj:{
	customerCode:"",
	customerName:""
}

那么就可以通过绑定component.obj[item.prop]，这里绑定的就是customerCode和customerName属性

咻咻~~