vue中v-model動態生成的實例詳解

每一行有一個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>

 歡迎加入大前端交流群！群號：277942610，新建立VIP新群