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 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

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 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

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 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

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

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

In this post, we will be taking a look at looping through arrays, both with simple values and objects. We will be looping through the data properties that I have already added to the Vue instance; one is an array of strings representing movie titles, and the other is an array of objects, representing employees.… read more

Since we’re on the subject of showing and hiding elements, let’s see how we can hide the string interpolation syntax that appears on the page until Vue.js is bootstrapped. Since the string interpolation syntax is simply a part of the HTML as normal text, the browser will render it as such. It will then be… read more