Looping with Fragments

Showcase how to use v-for within a fragment to efficiently render a list of items without a wrapper element.

<template>
  <div>
    <!-- Use v-for with a template tag to loop over items without a wrapper -->
    <template v-for="item in items">
      <li :key="item.id">{{ item.text }}</li>
    </template>
  </div>
</template>

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

This code snippet shows a Vue.js component using template tags and the v-for directive to loop over a list of items. Each item is represented by a 'li' element that doesn't have a wrapper element around the list. The ':key' attribute with a unique identifier for each 'li' element ensures that Vue.js can keep track of each item for efficient updates.