<div id="root">
<ul>
<li v-for="(on, index) in list" v-bind:key="on.key">{{ on.title }}<button v-on:click="deleteList(index)">Delete</button></li>
</ul>
<input v-model="gulp">
<br>
<button v-on:click="addList">Add</button>
</div>
const vm = new Vue({
el: '#root',
data: {
list: [],
keys: '',
gulp: '',
},
methods: {
addList: function() {
this.list.push({ title: this.gulp, key: this.keys++ });
},
deleteList: function(num) {
this.list.splice(num, 1);
},
},
});
This Pen doesn't use any external CSS resources.