Loops & Key in vuejs - List rendering in vuejs #1 - Vuejs tutorial - Tutorial 15
[DISCOUNTED] Master CSS Grid Course: https://bit.ly/2NONxxE
Loops & Key in vuejs - List rendering in vuejs - This lecture is dedicated to loops. Loops in vuejs are similar to what we seen in most programming languages. For using loops we need array or object or something else. So, in vuejs we can use v-for direct to loop over object or array. First we will start our lecture with simple array which have object in it. And we will pull out msg and id from that object using loops. So, we will use loop to iterate over each object in list and then we will output what we want. This will be easy becuase this is same as we learned in js or in any other programming languages.
After using loops with the array we will see how can we loop over an object in vuejs. To loop over an object we will use the same directive of vuejs 'v-for'. But in this example vuejs pull out val of each property while looping over the object. So when we loop over object using v-for we will only get the value of the object. So, next, arise how can I get property from object also while looping. For this will use another parameter and name it as we like. Which will act as the property of the object in the loop. And now we can easily output each property in the loop.
Now, we learned how can we loop over array and object which is similar to other programming languages but now we are going to lok something which is not common and that is key. What is key in loop. Key is the unique identity of loop items in loop. Vuejs tracks data using some kind of index and updates it accordingly. So, we have to give unique identity to each item in loop using key. So we can apply index of iteration as key or any unique value which should be unique to each item in loop.
So, In this lecture, we will learn about loop with array and objects and What is key in loop. In the next lecture, we will learn more about loops.
Follow me:
Twitter: / jd13400010
