vue中v-model动态生成的实例详解

Posted 2020-12-05 liumingwang

每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的。那么问题来了，我们要怎样动态生成v-model？

<template>
  <div>
  <div class="line" v-for="(item,index) in dataModel">
    <input type="text" v-model="dataModel[index].value1" />
    <span>{{dataModel[index].value1}}</span>
    <button v-bind:data-index="index" v-on:click="submitClick">提交</button>

    <input type="text" v-model="dataModel[index].value2" />
    <span>{{dataModel[index].value2}}</span>
  </div>
</div>
</template>

<script>
export default {
        data() {
      return {
        dataModel: []
      }
    },
    created(){
        // 这里是动态生成v-model,这个可以放在网络请求成功里面;
        var len = 4;
        for (var i = 0; i < len; i++) {
          var item = {value1: ‘‘};
          this.dataModel.push(item);
        }
      
    },
    methods:{
        // 显示v-model里面的数据
        submitClick: function(event){
          var tag = event.target;
          var index = tag.getAttribute(‘data-index‘);
          alert(this.dataModel[index].value1);
          console.log(this.dataModel)
        }

    }
}
</script>