Hey everyone, I am new to Vue and struggling with a certain task. I have two tables: Books and Booking. Books: ID, NAME, AUTHOR etc. Booking: ID, ID_USER, ID_BOOK
I'm creating a page in Vue that displays all bookings, but the table only shows the BOOK ID. I want to make it so that when I click on the BOOK ID, the page will display the name of the book associated with that ID.
<template>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>User</th>
<th>Book</th>
</tr>
</thead>
<tbody>
<tr v-for="booking in bookings" :key="title">
<td>{{booking.user}}</td>
<buitton typeof="button" class="btn btn-light mr-1">{{booking.ID_BOOK}}</button>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from "axios"
export default {
name: "Prenotazioni",
data() {
return {
bookings: [],
books:[]
}
},
mounted() {
axios
.post("https://localhost:7285/Prenotazioni/GetPrenotazione")
.then(response => {
this.bookings = response.data.pre
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false),
axios
.post("https://localhost:7285/Libri/GetLibri")
.then(response => {
this.books=response.data.libro
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}
</script>