Vue.js Remove item from Array
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> </head> <body> <div id="app"> <h1>List</h1> <div v-for="(listItem, index) in list"> <input v-model="listItem.a" value="{{listItem.a}}"> <button @click="deleteList(index)"> Delete List </button> </div> <button @click="addList"> Add New List </button> <pre>{{ list }}</pre> </div> <script> new Vue({ el: '#app', data: { list: [{a: 'Hello World!' }] }, methods: { addList: function () { this.list.push({ a: 'Hello World!' }); }, deleteList: function (index) { this.list.splice(index, 1); } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> </head> <body> <div id="app"> <h1>List</h1> <div v-for="(listItem, index) in list"> <input v-model="listItem.a" value="{{listItem.a}}"> <button @click="deleteList(index)"> Delete List </button> </div> <button @click="addList"> Add New List </button> <pre>{{ list }}</pre> </div> <script> new Vue({ el: '#app', data: { list: [{a: 'Hello World!' }] }, methods: { addList: function () { this.list.push({ a: 'Hello World!' }); }, deleteList: function (index) { this.list.splice(index, 1); } } }); </script> </body> </html>
Copyrights@tutorialsplane.com