How can I handle asynchronous events in Vue 3?

How can I handle asynchronous events in Vue 3?

In Vue 3, you can handle asynchronous events using the async and await keywords in your methods. This allows you to write cleaner and more readable code when dealing with promises.

Can you give me an example of using async/await in a Vue 3 component?

Sure! Here's a simple example:

<template>
  <button @click="fetchData">Fetch Data</button>
  <div v-if="data">{{ data }}</div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        this.data = await response.json();
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
  },
};

What if I need to handle multiple asynchronous calls?

You can use Promise.all to handle multiple asynchronous calls simultaneously. Here's an example:

async fetchMultipleData() {
  try {
    const [data1, data2] = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2'),
    ]);
    this.data1 = await data1.json();
    this.data2 = await data2.json();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}