i'm new in vue and i don't know how can i do this thing. I have two tables Books and Booking Books: ID, NAME, AUTHOR ecc. Booking: ID, ID_USER, ID_BOOK

In vue i create a page that show me all bookings but in the table i have the BOOK ID and i want to do something that when i click on the BOOK ID on the page shows me the Name of the book that have this ID. The code is:

<template>
<div>
  <table >
     <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" >{{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>```

CodePudding user response：

Try this :

new Vue({
  el: '#app',
  data: {
    bookings: [],
    books:[],
    selectedBook: null
  },
  mounted() {
    // For demo I am just mocking the response, In actual you can get it from an API.
    this.books = [{
      id: 1,
      name: 'Book 1',
      author: 'Author 1'
    }, {
      id: 2,
      name: 'Book 2',
      author: 'Author 2'    
    }];
    this.bookings = [{
      id: 1,
      user: 'Alpha',
      ID_USER: 1,
      ID_BOOK: 1
    }, {
      id: 2,
      user: 'Beta',
      ID_USER: 2,
      ID_BOOK: 2   
    }];
  },
  methods: {
    getBookDetails(bookId) {
        this.selectedBook = this.books.find(obj => obj.id === bookId);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table >
    <thead>
      <tr>
        <th>User</th>
        <th>Book</th>
        <th>Book Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(booking, index) in bookings" :key="booking.id">
        <td>{{ booking.user }}</td>
        <td><button @click="getBookDetails(booking.ID_BOOK)">{{ booking.ID_BOOK }}</button></td>
        <td v-if="selectedBook?.id === booking.ID_BOOK">{{ selectedBook?.name }}</td>
      </tr>
    </tbody>
  </table>
</div>