Vue table with button that send me on the title of the book

#1

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:

                <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>

    </table>

#2

Hi @Mars95
I looked into it and solved this problem using a javascript function to show the details of the book when clicked on the book id button.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>User</th>
          <th>Book</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="booking in bookings" :key="booking.id">
          <td>{{ booking.id_user }}</td>

          <button
            typeof="button"
            class="btn btn-light mr-1"
            @click="add(booking.id_book)"
          >
            {{ booking.id_book }}
          </button>
        </tr>
      </tbody>
    </table>
    <div v-if="bookToShow">
      <p>Book id: {{ bookToShow.BookId }}</p>
      <p>Book Name: {{ bookToShow.bookName }}</p>
      <p>Author: {{ bookToShow.AuthorNAme }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      books: [
        {
          BookId: 1,
          bookName: "Foo",
          AuthorNAme: "Bar",
        },
        {
          BookId: 2,
          bookName: "Fooiiuuiu",
          AuthorNAme: "Barrrrr",
        },
        {
          BookId: 3,
          bookName: "Foopopopopopoopp",
          AuthorNAme: "Bartytytytytytyytyty",
        },
      ],
      bookings: [
        {
          id: 1,
          id_user: "user1",
          id_book: 1,
        },
        {
          id: 2,
          id_user: "user3",
          id_book: 2,
        },
        {
          id: 3,
          id_user: "user2",
          id_book: 3,
        },
      ],
      bookToShow: null,
    };
  },
  methods: {
    add(bookId) {
      console.log(bookId);
      const book = this.books.find((book) => book.BookId === bookId);
      console.log(book);
      this.bookToShow = book;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

This is the src link for the code: relaxed-antonelli-21mpou - CodeSandbox
I hope this helps.