ES6 Destructuring

<script setup lang="ts">
import { ref } from 'vue'

type Meeting = {
  id: number
  date: string
  time: string
  location: string
}

const mettings = ref<Meeting[]>([
  { id: 1, date: '2024-07-09', time: '10:15', location: 'Paris' },
  { id: 2, date: '2024-07-08', time: '9:30', location: 'London' },
  { id: 3, date: '2024-07-07', time: '7:45', location: 'San Francisco' },
])
</script>

v-for without ES6 destructuring

<template>
  <div v-for="meeting in mettings" :key="metting.id">
    <div>Date: {{ meeting.date }}</div>
    <div>Time: {{ meeting.time }}</div>
    <div>Location: {{ meeting.location }}</div>
  </div>
</template>

v-for with ES6 destructuring

<template>
  <div v-for="{ id, date, time, location } in mettings" :key="id">
    <div>Date: {{ date }}</div>
    <div>Time: {{ time }}</div>
    <div>Location: {{ location }}</div>
  </div>
</template>