Vue 3.0 List Rendering

Vue 3.0 list rendering

The list rendering in Vue.js helps to create lists of items in a fluid and flexible way. It is primarily done using the v-for directive.

For our tutorial, we will create a simple component that lists out an array of user data.

Here's a step-by-step guide:

Step 1: Initialize your Vue project.

If you have not created your Vue 3 project yet, you can do it using Vue CLI.

vue create my-project

Choose Vue 3 when asked which version of Vue to use.

Step 2: Go to your App.vue file, or whichever component you would like to render your list in.

<template> <div class="app"> <div v-for="(user, index) in users" :key="index" > <h2>{{ user.name }}</h2> <p>{{ user.email }}</p> </div> </div> </template> <script> export default { data() { return { users: [ { name: 'John Doe', email: 'john@doe.com' }, { name: 'Jane Doe', email: 'jane@doe.com' }, { name: 'Bob Smith', email: 'bob@smith.com' }, ], }; }, }; </script> <style scoped> </style>

In the template, we're using v-for to loop over each user in the users array. user is the current item we're looping over, and index is the current index in the array.

The :key is necessary to give each rendered item a unique identifier so Vue can keep track of each node's identity. This will help Vue optimize re-rendering processes. While using the index as key is not recommended for lists that might change, it's okay for static lists like this.

Step 3: Style your rendered list as per your requirements.

You can add CSS to the <style> section of your component to give your rendered list a specific look.

Step 4: Run your application.

You can run your Vue 3 application using the following command:

npm run serve

And that's it! You should now see a list of users rendered in your application. This is a basic example, but you can extend this to include any kind of data you would like to render in a list.

Examples

  1. v-for Directive in Vue 3.0:

    • Description: v-for is used for rendering lists by iterating over an array or object.
    • Code Example:
      <template> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], }; }, }; </script>

  2. Vue 3.0 Dynamic List Rendering:

    • Code Example:
      <template> <ul> <li v-for="item in dynamicItems" :key="item.id">{{ item.name }}</li> </ul> </template> <script> export default { data() { return { dynamicItems: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' }, ], }; }, }; </script>

  3. Conditional Rendering in Vue 3.0 Lists:

    • Code Example:
      <template> <ul> <li v-for="item in items" :key="item.id" v-if="item.visible">{{ item.name }}</li> </ul> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item A', visible: true }, { id: 2, name: 'Item B', visible: false }, { id: 3, name: 'Item C', visible: true }, ], }; }, }; </script>

  4. Vue 3.0 v-for Index Usage:

    • Code Example:
      <template> <ul> <li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item }}</li> </ul> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], }; }, }; </script>

  5. Iterating Over Objects in Vue 3.0:

    • Code Example:
      <template> <ul> <li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li> </ul> </template> <script> export default { data() { return { myObject: { key1: 'Value 1', key2: 'Value 2', key3: 'Value 3' }, }; }, }; </script>

  6. Filtering and Sorting in Vue 3.0 Lists:

    • Code Example:
      <template> <ul> <li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li> </ul> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item C' }, { id: 2, name: 'Item A' }, { id: 3, name: 'Item B' }, ], }; }, computed: { sortedItems() { return this.items.slice().sort((a, b) => a.name.localeCompare(b.name)); }, }, }; </script>

  7. Handling Click Events in Vue 3.0 Lists:

    • Code Example:
      <template> <ul> <li v-for="item in items" :key="item.id" @click="handleItemClick">{{ item.name }}</li> </ul> </template> <script> export default { data() { return { items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }], }; }, methods: { handleItemClick(item) { console.log(`Clicked: ${item.name}`); }, }, }; </script>

  8. Vue 3.0 List Transition Effects:

    • Code Example:
      <template> <transition-group name="fade" tag="ul"> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </transition-group> </template> <script> export default { data() { return { items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }], }; }, }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>

  9. Lazy Loading Images in Vue 3.0 Lists:

    • Code Example:
      <template> <ul> <li v-for="item in items" :key="item.id"> <img :src="item.imageSrc" alt="Item Image" loading="lazy" /> {{ item.name }} </li> </ul> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item A', imageSrc: 'itemA.jpg' }, { id: 2, name: 'Item B', imageSrc: 'itemB.jpg' }, { id: 3, name: 'Item C', imageSrc: 'itemC.jpg' }, ], }; }, }; </script>

  10. Infinite Scrolling with Vue 3.0 Lists:

    • Code Example:
      <template> <div ref="scrollContainer" @scroll="handleScroll"> <ul> <li v-for="item in visibleItems" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { allItems: /* ... */, visibleItems: /* ... */, itemsPerPage: 10, currentPage: 1, }; }, methods: { handleScroll() { const container = this.$refs.scrollContainer; if (container.scrollTop + container.clientHeight >= container.scrollHeight) { this.loadMoreItems(); } }, loadMoreItems() { // Logic to load more items }, }, }; </script>

  11. Vue 3.0 Scoped Slots in List Rendering:

    • Code Example:
      <template> <ul> <template v-for="item in items" :key="item.id"> <slot :item="item"></slot> </template> </ul> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' }, ], }; }, }; </script>

More Tags

orchardcms unsafe dropwizard asp.net-identity-2 adapter angular-material-7 css-position ienumerable pipe

More Programming Guides

Other Guides

More Programming Examples