Vue.js List Rendering

In Vue.js, you can display lists of items using the built-in v-for directive. It allows you to loop through arrays or objects and render an element for each item. Vue automatically tracks each item and updates the DOM efficiently whenever the data changes.

Using v-for to Render an Array

The most common use of v-for is to loop over an array and display its items in the DOM.

Example:

<div id="app">
  <ul>
    <li v-for="student in students">{{ student }}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        students: ['Neha', 'Emily', 'Zara']
      };
    }
  }).mount('#app');
</script>

In this example, Vue loops through the students array and creates one <li> for each item.

Using Index in v-for

You can also access the index of each item in the loop.

Example:

<div id="app">
  <ul>
    <li v-for="(city, index) in cities">{{ index + 1 }}. {{ city }}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        cities: ['Mumbai', 'London', 'New York']
      };
    }
  }).mount('#app');
</script>

This example utilizes the index to display a serial number next to each city name.

Rendering an Array of Objects

You can loop through an array of objects and access their properties inside the loop.

Example:

<div id="app">
  <ul>
    <li v-for="product in products">
      {{ product.name }} - ₹{{ product.price }}
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        products: [
          { name: 'Laptop', price: 45000 },
          { name: 'Smartphone', price: 18000 },
          { name: 'Tablet', price: 22000 }
        ]
      };
    }
  }).mount('#app');
</script>

In this example, each list item displays the product's name and its price from the object.

Using v-for with a key

When using v-for, especially with components or elements that may change, it's important to use the key attribute. It helps Vue identify which items have changed or been added or removed.

Example:

<div id="app">
  <ul>
    <li v-for="product in products" :key="product.id">
      {{ product.name }} - ₹{{ product.price }}
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        products: [
          { id: 1, name: 'Laptop', price: 45000 },
          { id: 2, name: 'Smartphone', price: 18000 },
          { id: 3, name: 'Tablet', price: 22000 }
        ]
      };
    }
  }).mount('#app');
</script>

The key is based on a unique id for each product.

Looping Through an Object

You can also loop through the properties of an object using v-for.

 Example:

<div id="app">
  <ul>
    <li v-for="(value, key) in user">{{ key }}: {{ value }}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        user: {
          name: 'Priya',
          age: 25,
          city: 'Mumbai'
        }
      };
    }
  }).mount('#app');
</script>

In this example, this loop outputs each key-value pair from the user object.

Conclusion

In this tutorial, you learned how to use v-for in Vue.js to render lists from arrays and objects. You saw how to display student names, product prices, city names, and user information. Using v-for with proper keys and structure helps you build dynamic and well-managed lists in your Vue applications.