zoukankan      html  css  js  c++  java
  • 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新群

  • 相关阅读:
    AGC041
    二分图 学习笔记
    区间DP 学习笔记
    3月21日考试 题解(数据结构+区间DP+贪心)
    Tarjan 做题总结
    3月15日考试 题解(数学+背包+线段树)
    差分约束 学习笔记
    Tarjan算法 学习笔记
    拓扑排序 学习笔记
    并查集 学习笔记
  • 原文地址:https://www.cnblogs.com/liumingwang/p/9334064.html
Copyright © 2011-2022 走看看