我是 vue 的新手，我不知道我該怎么做。我有兩張表 Books 和 Booking Books：ID、NAME、AUTHOR ecc。預訂：ID、ID_USER、ID_BOOK
在 vue 中，我創建了一個向我顯示所有預訂的頁面，但在表格中我有 BOOK ID，我想做一些事情，當我點擊頁面上的 BOOK ID 時，我會顯示具有此 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>```
uj5u.com熱心網友回復：
試試這個：
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 class="table table-striped">
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/493593.html
上一篇：如何有條件地為道具添加值？