O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Deleting data

Now let us proceed to another piece of functionality our stories list should have: Deleting a story we don't like. To remove a story from the array and the DOM, we are going to use Vue's $remove() method, which searches for an item and removes it from target array.

Note

The $remove() method works as follows. When you want to remove an item from an array called items you can do: vm.items.$remove(item)

<td>
    <div class="btn-group">
        <button @click="upvoteStory(story)" class="btn btn-primary">
            Upvote
        </button>
        <button @click="deleteStory(story)" class="btn btn-danger">
            Delete
        </button>
    </div>
</td> 

We append a Delete button to the actions column, bound to a method to delete the story. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required