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
[php]
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
[/php]

splice function using vuejs

[php]
example1.items.splice(indexOfItem, 1, newValue)
[/php]

Mutation Methods using vuejs

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

Dynamically add and remove row using vuejs Example

include libs

[php]
vue.js
vue.min.js
bootstrap.min.css
index.js
[/php]

index.html

[php]

[/php]

index.js

[php]
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)
}
}
});
[/php]

Example