February 1, 2019
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) } } });