vuejs dynamic components – Dynamically add-remove row using vuejs

vuejs dynamic components – Dynamically add-remove row using vuejs

I have a simple button add row data and a text box data. when I input a certain number in a multiple text box just I want to add new the number of dynamic rows base on the number each in the text box. and delete row using vuejsDynamically add-remove row using vuejs

Vue.set Method

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

splice function using vuejs

example1.items.splice(indexOfItem, 1, newValue)

Mutation Methods using vuejs

push(),pop(),shift(),unshift(),splice(),sort(),reverse()

Dynamically add and remove row using vuejs Example

include libs

vue.js
vue.min.js
bootstrap.min.css 
index.js

index.html

<div class="container" id="vue-app">
  <div class="row">
    <div class="col-sm-12">
      <h1>My persons</h1>
      
      <ul class="list-group">
        <li class="list-group-item">
          {{pname.title}}
          <button class="btn btn-warning btn-xs pull-right">Delete</button>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-12">
      <form>
        <div class="form-group">
          
        </div>
        
        <div class="form-group">
          <button class="btn btn-success">Add Person</button>
        </div>
      </form>
    </div>
  </div>
</div>

index.js

new Vue({
	el: '#vue-app',
  
  data: {
  	persons: [{id: 1, title: 'infinityknow.com'}],
    newpname: {id: null, title: ''}
  },
  
  methods: {
  	addClientName(newpname) {
    	this.persons.push(newpname)
      this.newpname = {id: null, title: ''}
    },
    
    removeCName(pname) {
      this.persons.$remove(pname)
    }
  }
});

Example