EventList.vue

<div class="event-list">
 <h2>Upcoming Events</h2>
 <ul>
    <li v-for="event in events" :key="event.id">
      <h3>{{ event.title }}</h3>
      <h4>{{ event.date }}</h4>
      <p>{{ event.description }}</p>
      <button @click="handleEventClick(event.id)">Book Now!</button>
    </li>
 </ul>
</div>

<script>

const axios = require("@/axios");

export default {
 components: {
    EventList,
 },
 props: {
    events: Array,
 },
 data() {
    return {}
 },
 methods: {
    handleEventClick(eventId) {
      axios.get(`https://api.EventManagement.com/booking/${eventId}`)
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
 },
};
</script>