- Learn by example
Make an RPG
Vue Implementations

Example of How to use v-for in vue

v-for let's you generate any number of tags by looping through an array. They can be HTML tags or your own custom component tags. Here is an example that iterates through the myDivs array.

<div id="demo"></div>
var app = new Vue({ el: "#demo", data: { myDivs: ["first", "second", "third"] }, template: `<div>My Divs: <div v-for="val in myDivs"> the {{ val }} div</div> </div>` });

Notice that we're able to access the myDivs of the vue data structure directly from our template/HTML code.

This example even works if we place the v-for loop in the main HTML code outside the template.

<div id="demo"> My Divs: <div v-for="div in myDivs"> Another Div </div> </div>
var app = new Vue({ el: "#demo", data: { myDivs: [1,2,3] } });

Caution: A common newbie mistake is to place your vue HTML markup outside of the Vue element (in this case#demo). This will prevent the v-for or any other v-function from rendering, as vue only renders inside of Vue instances/components.

Iterate an Object

You can iterate an object in a for loop like so:

<div id="demo"> <div v-for="feet, index in animal_feet" v-bind:key="index"> {{ index }} {{ feet }} </div> </div>
var app = new Vue({ el: "#demo", data: { animal_feet: { rabbit: 4, fish: 0, spider: 6 } } });

In a v-for loop, it's recommended you provide a v-bind:key so that Vue can identify each row uniquely.

Object Reactivity

Now, let's add a new animal to the object and update the view.

<button @click="add_animal"> Add Animal </buuton>
add_animal: function() { this.animal_feet.turtle = 4; }

Go ahead and try it. You'll notice that this doesn't work. Why not? If you check the debugger, you'll see that the object element is indeed there. If you add an object element like that, vue is not able to see that you've added it and thus can not react to it. Here's the fix:

Vue.set( app.animal_feet, 'turtle', 4);

Now, click on the add animal button and you'll see the view reacts right away. Of course, since it's an object, only a maximum of 1 turtle will be added because the next turtle added just occupies the same spot, as is the case with any javascript object. Note, you could've also done this:

app.$set( app.animal_feet, 'turtle', 4);

Also, if you modify an existing property on an object those are reactive as well. So, this works:

app.animal_feet.rabbit = 5;
Use the above code in place of adding a turtle.

As soon as you execute that code, it updates the view right away.

Array Reactivity

Vue wraps all the following functions which means they are all reactive. You can use any one of them and the view will update right away.

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

Let's see this in action.

<div id="demo"> <div v-for="color, index in colors" v-bind:key="index"> {{ index }} {{ color }} </div> <button @click="add_color">Add Color</buuton> </div>

If you try to modify the array directly in javascript, it won't be reactive. The following two will NOT work:

app.colors[8] = "purple";
app.colors.length = 20;

To fix this, you need to use Vue.set

Vue.set( app.colors, 8, "purple" );

Now, when you click the button, purple is added at the 8th position just like the javascript code before, except this time Vue knows about it and thus is able to render it right away.

The splice function in vue works like javascript's splice function. If you want to use the splice function, you can do so like so.

app.colors.splice( start_position, num_elements_to_delete, new_element)

In the next lesson, we will learn about Example of Vue v-bind

Get the Latest Tutorial Updates
<< >>