How to add rows base on the specified number on textbox 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);
    }
  }
});

Jeff · Accepted Answer · 2016-04-04 21:53:08Z

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

answered Apr 4, 2016 at 21:53

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add rows base on the specified number on textbox vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related