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

Until now, our templates haven’t supported dynamically rendering elements based on boolean conditions. That’s about to change, as we will talk about three directives in this lecture; v-if, v-else-if, and v-else. The names of these directives should pretty self-explanatory, so let’s dive straight into an example. Suppose that we have a webshop and we want… read more

If you – for whatever reason – want to only output something one time, then you can use the v-once directive. This directive ensures that an element is only rendered once, and when Vue.js re-renders the page, the element and all of its children will be considered as static content and thereby skipped. An example… read more