如何根据textbox vue.js上的指定数字添加行

Question

大家好，我是使用vue.js制作应用的新手 我想知道如何根据文本框上的指定数字添加行。

这是我的小提琴

https://jsfiddle.net/7nxhygLp/2/

  

脚本

    var evaluate  = new Vue({
  el: "#evaluate",
  data: {
    rows: [
    ]
  },
  methods:{
    addRow: function(){
      this.rows.push({});
    },
    removeRow: function(row){
      //console.log(row);
      this.rows.$remove(row);
    }
  }
});

Answer 1

您可以使用v-model检索输入框的值，然后只需按下许多新行：

<强> HTML

<input type="text" v-model="rowCount" name="rows" class="rows-textbox">

<强> JS

data: {
    rowCount:0,
    rows: [
    ]
  },
  methods:{
    addRow: function(){
      for(i = 0; i < this.rowCount; i++){
        this.rows.push({});
      }
      this.rowCount = 0;
    },
  }

Fiddle