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]