[Vuejs]-Vue.js: Add "_delete" element when removing element from v-for

0👍

I don’t know if I understand well your question, but here is my response anyway.

Imagine you have the following template:

<ul>
    <li v-for="item in items">
        {{ item.name }} <a href="#" @click.prevent="deleteItem(item)">Delete</a>
    </li>
</ul>

As you can see, you can use a deleteItem() method that you must define into your component:

export default {
    data () {
        return {
            items: [
                {
                    id: 1,
                    name: 'First Item'
                },
                {
                    id: 2,
                    name: 'Second Item'
                }
            ]
        }
    },
    methods: {
        deleteItem (item) {
            this.$http({
                url: '/api/items/' + item.id,
                method: 'delete'
            }).then( response => {
                // Do something here if you want
            }, response => {
                // Or here if you want to handle an error
            })

            let index = this.items.indexOf(item)
            this.items.splice(index, 1);
        }

    }
}

Leave a comment