By slightly modifying the syntax within the v-for directive, we can gain access to the current index of the loop. The index starts at zero and is incremented by one for each iteration. To show this, I have reused part of the example from the previous post and have added room for outputting the loop… read more

We previously saw how we can loop through an array of items. Something else we can do with the v-for directive is to loop through an object’s properties. First, I will show you how to loop through an object’s values. The syntax for doing so is actually the same as with arrays. So all we… read more

In this short lecture, I am going to show you how you can output a range of numbers with the v-for directive. By specifying a number as the expression, the template will be repeated that number of times. So if I wanted to output a list of the numbers from one to ten, I would… read more

There is one thing you should be aware of in regards to the v-for directive. When Vue.js updates a list of elements that was rendered with the v-for directive, it uses a so-called “in-place patch” strategy for accomplishing this. What this fancy term means, is that in case the order of the data items changes,… read more

In the previous post, we saw how Vue.js watches an array for changes and automatically re-renders the page to reflect the changes. Many of JavaScript’s array functions change the array that you pass to them instead of returning a new array. This is the case for functions like push, splice, pop, shift, and more. What… read more

Let’s take a short break from talking about directives and turn our attention to something calling computed properties. Computed properties are kind of similar to methods, but bring something powerful to the table: caching! Let’s dive into an example, and I will tell you what you need to know as we go along. I have… read more

In the previous post we saw how and when to use computed properties. In this post, I want to show you how to use getters and setters with computed properties. Computed properties are getter-only by default, but if you need to, you can also specify a setter. To do this, we actually need to change… read more

Sometimes you may want to watch data for changes and react to them. Typically all you need is computed properties, but there are some scenarios where you need to implement a custom watcher. Before we talk more about when to use watchers, let’s first see an example of how to use them. We will build… read more

In this post we’ll be talking about something called filters. Filters provide a way to perform text transformation such as capitalizing letters or doing virtually anything we’d like. Filters can be used both within string interpolation, but also within the v-bind directive’s expression. As always, let’s dive straight into an example. I have a message… read more

So far we have seen quite quite a few examples, but let’s be honest, they haven’t been that visually appealing. In the next couple of lectures, we are going to see how we can apply styling to our elements and make things just a bit more interesting. We are first going to start out by… read more