Vue Tutorial 4 - Managing a List

Granny is ready to send us grocery shopping again. The last time we went shopping for granny, she only added a few things to her typical (static) list. That was fine because we were easily able to program the “Add to the list” functionality in our Vue app. 

This time, she is throwing a dinner party for all of her relatives, including the distant cousins you’ve never met before. We’re in trouble! Our Vue app doesn’t allow us to remove items from the list so we have to get programming.  

Note: For reference, you can find parts one, two, and three of the series at their respective links.  

Removing Items

In order to remove an item from the list, we’ll first need a button hooked up to a method. In fact, each item on the list will have its own remove button. 

<li v-for="grocery in groceries">
{{ grocery.name }}
<button v-on:click="handleRemove">Remove</button>
</li>

...
methods: {
handleSubmit: function () {
console.log(this.$refs.item.value)

this.groceries.push({name: this.$refs.item.value})

this.$refs.item.value = ''
},
handleRemove: function() {
}
}

In order to find the item in the list that has been selected for removal, we’ll need something to identify it by. It would be ideal if we had access to the index of the item that has been pressed. However, this is not the case at this time. Let’s get access to the index then. This can be easily achieved by changing the arguments in the v-for directive.

You may also like: Everything React: Tutorials for Beginners and Experts Alike.

Instead of using:

<li v-for="(grocery) in groceries">

we’ll use:

<li v-for="(grocery, index) in groceries">

We can now simply pass the item's index as an argument of the handleRemove() method.

<li v-for="(grocery, index) in groceries">
{{ grocery.name }}
<i class="far fa-trash-alt" v-on:click="handleRemove(index)"></i>
</li>
...
handleRemove: function (index) {
console.log(index)
}

On every press of a remove button, your console will now print out the index of the object to be removed. In the screenshot below, the second item on the list was pressed (number "1" in the console).

Style

Before we implement the logic of removing a selected item from the list, I trust you’d agree that our remove buttons look horrendous. It would be great if we could make our buttons look awesome in a quick and hassle-free manner. Turns out there is a project out there just for that. Font Awesome. 

If you’re using npm, you can have access to hundreds of icons in less then a minute. First, run the following command:

 npm install --save-dev @fortawesome/fontawesome-free 

Then, import font awesome stylesheet and you’re good to go. 

<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"/>

We will now replace our current button with a new and stylish one

 <i class="far fa-trash-alt" v-on:click="handleRemove(grocery.name)"></i>

It will be a pleasure to click on one of these:

Logic

Now, let’s look at removing the actual items from the list. Considering we have access to the index of the object we’re removing, this should be straight forward. 

We will deploy the splice method for this purpose:

/**
    * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
    * @param start The zero-based location in the array from which to start removing elements.
    * @param deleteCount The number of elements to remove.
    */
  splice(start: number, deleteCount?: number): T[];

We'll use it by passing to it the index along with number 1 because we are removing only one item. 

this.groceries.splice(index, 1)

You can now manage the list effectively without the fear of getting items Granny didn’t ask for! 

Conclusion  

With our current knowledge of Vue, it was a breeze to implement functionality for managing a list. We were also introduced to the Font Awesome library, which will assuredly improve the style of your future applications in a quick and convenient manner. 

The code for this tutorial is available here. 

Further Reading

• Vue Example: Creating a TODO App using Vue.js 2, Vuex, and Codemix [Video].
• How and Why We Moved to Vue.js.
• Creating a Real-Time Data Application Using Vue.js.