How do I use list rendering in Vue.js?

How do I use list rendering in Vue.js?

In Vue.js, you can use the v-for directive to render a list of items. For example, <div v-for="item in items" :key="item.id">{{ item.name }}</div>. This will iterate over the items array and render each item's name.

Can you show me a complete example?

Sure! Here's a simple example:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

What if I want to render a list of objects with more properties?

You can access any property of the object in the template. For example, if your items have a description, you can do:

<li v-for="item in items" :key="item.id">{{ item.name }} - {{ item.description }}</li>

Is there a way to filter the list before rendering?

Yes, you can use computed properties to filter the list. For example:

computed: {
  filteredItems() {
    return this.items.filter(item => item.name.includes('1'));
  }
}

Then use v-for="item in filteredItems" in your template.