In the previous article Getting-Started-With-Vue it was discussed how to install the vue-cli. So in this article let’s start by creating an app with the vue-cli. vue create my-portfolio. This above command will direct the vue-cli to create an app template by the name my-portfolio. Once the app is created to run the second command: vue. As your Vue.js Single Page Applications (SPAs) become moderately complex, you start to need Vue Router, and, moreover, nested routes. Nested routes allow for more complex user interfaces with components nested inside each other. Let’s build out a relatively simple use case that shows the utility of nested routes in Vue Router. The Most Important Feature in Vue November 2019. I've said it before and I'll say it again: Computed properties are the most important feature in Vue. Sure, scoped slots let you create some nice abstractions and watchers are useful too. But I don't think anything comes close to how valuable computed props are.

Tutorial

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.

Listing out items, from a simple to-do list to a complex card system is a common requirement for front-end applications. Vue.js supports rendering lists of items onto the browser using the built-in v-for core directive.

Starting off with the Vue.js Hello World application, we can add data that can then be repeated using v-for.

V-for

The built-in v-for directive allows us to loop through items in an array or object.

We can loop over items in our messages array from the data model. This can be done by adding the v-for directive in the element that should be repeated.

This will output an unordered list with the values from the array.

Similarly, we can loop over the objects in the shoppingItems array. Here we can access the values using a given key (ex- item.name).

<template> element

The v-for directive only applies to the element that it’s attached to. If multiple items should repeat with the v-for directive, we should wrap the elements in a <template> element.

V-for with Objects

We can loop over objects with multiple properties like we do with arrays:

In the above example, we’re printing out the items (‘item1’, 'item2’, 'item3’).

In addition to the property value, we get two additional parameters when looping over objects with Vue. Namely, the key and the index values.

The key value gives us access to the current properties key ('key1’, 'key2’, 'key3’).

The index provides us the index of the current item in the loop. This is simply the position of the item in the looped list (0, 1, 2).

V-for with Range

We can use a range in the v-for directive to iterate a specified number of times.

The following syntax would print out 1 to 15 in an unordered list:

Key

When the array order is changed, by default Vue would change the data in each existing element rather than moving the DOM elements to the updated position.

We can set Vue to track each element using a key. This would cause it to move elements rather than replacing values.

This value should be unique to each element that’s being iterated over:

Managing changes

Out of the box v-for supports array mutation methods. These are push, pop, shift, unshift, splice, sort and reverse. If any of these operations are performed on an array, the v-for directive updates the view with the new data.

Also, when we replace an array with a new array, Vue finds the most optimized way to update the items.

Problems with change management

The two things that Vue can’t track when changed in an array are,

1. Setting items directly

ex: data.shoppingItems[3] = {price: 10, name: 'pineapple'}

This can be resolved by using the Vue.set method. This method accepts the array, an index and the new value.

Also, we can use splice to set the value at a given index.

2. Modifying array length

ex: data.shoppingItems.length = 2

We can use Splice to modify the array length instead of setting it directly to avoid issues.

Filtering list

We can filter out lists that are being displayed without changing the original list. This can be done using computed values or simply by having a method and passing values through when setting the v-for values.

Using computed values to filter items

Instead of setting the value directly on the list, we instead point to a computed value. We can write the logic for filtering out data in that computed function.

The itemLessThanTen function simply uses the JS filter function to return any item who’s price is less than 10.

Using a method to filter items

In this approach, we pass in the same shoppingItems list directly to a method that we define. By doing so, all the items in the array would be filtered according to the method definition.

Here, we are passing the shoppingItems list though the filterItems method.

The filterItems method performs the same function as in the computed value example and the final result would be the same.

Smashing Newsletter

Every week, we send out useful front-end & UX techniques. Subscribe and get the Smart Interface Design Checklists PDF delivered to your inbox.

Slots are a powerful tool for creating reusable components in Vue.js, though they aren’t the simplest feature to understand. Let’s take a look at how to use slots and some examples of how they can be used in your Vue applications.

With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are slots truly capable of?

If you’re new to Vue or haven’t seen the changes from version 2.6, read on. Probably the best resource for learning about slots is Vue’s own documentation, but I’ll try to give a rundown here.

What Are Slots?

Slots are a mechanism for Vue components that allows you to compose your components in a way other than the strict parent-child relationship. Slots give you an outlet to place content in new places or make components more generic. The best way to understand them is to see them in action. Let’s start with a simple example:

This component has a wrapper div. Let’s pretend that div is there to create a stylistic frame around its content. This component is able to be used generically to wrap a frame around any content you want. Let’s see what it looks like to use it. Small roulette table for sale ebay. The frame component here refers to the component we just made above.

The content that is between the opening and closing frame tags will get inserted into the frame component where the slot is, replacing the slot tags. This is the most basic way of doing it. You can also specify default content to go into a slot simply by filling it in:

So now if we use it like this instead:

The default text of “This is the default content if nothing gets specified to go here” will show up, but if we use it as we did before, the default text will be overridden by the img tag.

Multiple/Named Slots

You can add multiple slots to a component, but if you do, all but one of them is required to have a name. If there is one without a name, it is the default slot. Here’s how you create multiple slots:

We kept the same default slot, but this time we added a slot named header where you can enter a title. You use it like this:

Just like before, if we want to add content to the default slot,

Nested Slots Vue Js