Anonymous Loops

To loop over HTML elements in Vue, you utilize the v-for loop directive. When Vue renders the component, it will iterate the HTML element you have added the directive to in order to use the data being parsed into the directive. Anonymous loops can be performed using this directive, where you can define a number X and the loop will iterate that many times, which can be handy in situations where you can more strictly control how many loops you iterate on or for placeholder content. All loops require an iterator :key. When the key or the content bound to the key changes, Vue knows that it needs to reload the content inside the loop. If you have multiple loops in one component, randomize the key with extra characters or context-related strings to avoid :key duplication conflicts.

Anonymous loops are demonstrated below; note that you can use quotation marks or backticks (`) to describe strings:

          <div v-for="n in 2" :key="'loop-1-' + n">
    {{ n }}
</div>
<!-- Backticks -->
<div v-for="n in 5" :key="`loop-2-${n}`">
    {{ n }}
</div>

The output of the preceding code should look as follows.

Figure 1.25: Output of anonymous loops example

Understanding loops is key to not only working with Vue but also with JavaScript in general. Now that we have covered how to handle loops by using the v-for syntax and the importance of binding the :key property to add reactivity to the content being looped, we will utilize this function in the next exercise.

Exercise 1.08: Using v-for to Loop Over an Array of Strings

In this exercise, we are going to perform an anonymous loop using Vue's v-for directive. This will be familiar to those who have used for or foreach loops in JavaScript before.

To access the code files for this exercise, refer to https://packt.live/390SO1J.

Perform the following steps to complete the exercise:

1. Open a command-line terminal, navigate into the Exercise1.08 folder, and run the following commands in order:

   > cd Exercise1.08/
   > code .
   > yarn
   > yarn serve

   Go to https://localhost:8080.

2. Compose the following syntax inside of Exercise1-08.vue by adding an <h1> title to your component and a <ul> element with an <li> tag which will have the v-for directive, which has the value of n as 5:

   Exercise1-08.vue

   1 <template>
   2   <div>
   3     <h1>Looping through arrays</h1>
   4     <ul>
   5       <li v-for="n in 5" :key="n">
   6         {{ n }}
   7       </li>
   8     </ul>

   The complete code for this step is available at https://packt.live/3pFAtgB.

   This will generate an output as follows:

   

   Figure 1.26: Iterating over arbitrary numbers will also allow you to output the index

3. Now let's loop through an array of strings and count the iteration of our array with n. Prepare an array of your personal interests in the data() function. By looking for (item, n) inside the interests array, item outputs the string of the array, and n is the loop index:

   <template>
     <div>
       <h1>Looping through arrays</h1>
       <ul>
         <li v-for="(item, n) in interests" :key="n">
           {{ item }}
         </li>
       </ul>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         interests: ['TV', 'Games', 'Sports'],
       }
     },
   }
   </script>

   The following output is generated upon running the preceding code:

   

Figure 1.27: Iterating over an array of strings

In this exercise, we learned how to iterate over both an arbitrary number and a specific array of strings, outputting the string value or index of an array. We also learned that the key attribute needs to be unique to avoid DOM conflicts and forces the DOM to re-render the component properly.