Practicing Vue.js for beginners (P3)

Welcome back to the series!
In the previous lesson, we stopped at v-if and v-show. In this lesson, we will learn how to loop through arrays and objects and create an element for each of their items.

v-for

We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items are the source data array and the item points to the array element being browsed.
Today we are going to start with an empty board to make things clearer.

We will start creating a simple list, an array, that we can loop through its contents. I will create an attribute within my data object, called games. Feel free to change the title to something you like.

Now that we’ve set up our array, let’s create a simple <ul> element to display it.
In Vue, I declare our v-for directive on the TOP of the element I want to loop. Make these changes to your <li> tags and I will dissect them later.

Let’s see.

1. v-for has been added directly to <li>, not on the <ul> tag as we saw earlier. This means: “For every game in my arrays, please create a new <li> inside these <ul> tags.
2. Note that the game is an attribute that I added earlier to the array inside my data, so I have to use this variable name.
3. Game variables (singular) are defined arbitrarily, I can use item , game , title or whatever name I feel like. But be sure to understand that this game in games is what you will use as a variable in your loop.
4. Finally, inside my <li> tag, I give the content of the game variable, so while the loop is running for each game, this will output the string as <li>.

Run your application inside the browser and you will see a list of your items given to the screen.

Taking it up a notch

Further, v-for is really a very simple concept and this example is super boring. So how about we make things a bit more complicated, by making our array include some objects and also applying some v-if in our list?
First, update my games with some more interesting data.

If you run your application, this point will not be corrupted, but it will only output objects in string format, not nice. In fact, I would completely consider my <ul> method and use <div> to export our information.

1. div v-for="game in games" Similar to the old one, I will repeat our game array and store each game in the game variable.
2. h1 : the game is an object, which in turn holds its own properties, name, console and rating. Inside <h1> we will export the name * of the game: game.name . And console: game.console . As you can see now, v-for is not restricted to exporting only a single element as we saw before with li, but you can actually export as many HTML as you need.
3. The v-for nested. Inside the span element we actually have a nested v-for loop (this is OK to do), except a little differently, we don’t loop an array or an object.
4. Finally, v-if . We will output the <div> tag in our loop if the condition is met, so only show if and only if the current game rating is greater than 5.

Go ahead and run it again in your browser and look at the greatness and don’t bother with CSS.

The: key attribute

One last thing that I purposely left to the end. Properties :key . When you iterate over elements with v-for, Vue.js has NO way to track your elements in response, because it cannot “distinguish” one object from another. What this means for you is because Vue can’t do this, it will display the WHOLE portion of the page being created by this loop. In my case, it’s a very small part and the performance gain may be minimal, but that’s something you should keep in mind – and just do it to best practice.
How to use it? :key expects some string it will use to “name” or “track” the element, so we need to give it a unique identifier. In the case of my simple games , I could do:

I am pretty sure that I will not have the same game twice on this list, so this is quite safe. Using an id if you have data coming from the database is also ideal to use here.

Form Input Bindings

Basic Usage

You can use the v-model directive to create two-dimensional data constraints on form input and textarea elements. Vue will automatically select the appropriate way to update this element based on the type of input. A bit magical, v-model is a syntax sugar for updating data based on user input events along with some other special cases.
For v-model it will ignore all value, checked or selected initializations on the form components and it will always handle the data contained in the Vue instance, so you should declare the initial values. Create that in the data scope of the Vue instance For example with the input form:

For example with the form text area:

Modifier

1. lazy
   Normally, v-model will automatically sync during the editing process (except for the IME languages ​​- see the conclusion!), But if you want to change that status, you can use .lazy. modifier to convert it to a change event state (meaning that when the input changes, the data proceeds synchronously).

2. number
   If you want to constrain the input of only allowed numbers, use the modifier .number to bind this.

3. trim
   If you want to remove the white space at either end of the data, the .trim modifier is an excellent option.

v-model only works on Latin languages, but if you use IME languages ​​(those for Japanese, Chinese, Korean, etc.) v-model it will not be able to synchronize data during editing or changing, and to overcome that problem you can use event directives.