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

Question

Hello everyone I'm new at making app using vue.js I'm wondering How to add rows base on the specified number on textbox.

this is my fiddle

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

script

    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

You can use v-model to retrieve the value of the input box, and then just push that many new rows:

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