Как я могу получить значение определенной строки в таблице в VueJS 2?
Это мой столик прямо сейчас
Ниже приведен мой код для генерации таблицы и двух кнопок, которые будут отображать модалы; один - редактировать детали, а другой - отображать QR-код, поступающий из базы данных. Я хочу получить последнее значение цикла и поместить его в ПОКАЗАТЬ кнопку QR , а кнопка Показать QR будет содержать последнее значение из цикла.
<div class="myTable table-responsive">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Member ID</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="result in filteredList" :key="result.id">
<td>{{result.Memb_ID}}</td>
<th>{{result.First_Name}}</th>
<th>{{result.Middle_Name}}</th>
<th>{{result.Last_Name}}</th>
<th>{{result.Address}}</th>
<div class="row justify-content-center">
<b-button v-b-modal.showDetails size="lg" class="showDetails" variant="danger">Edit</b-button>
<b-button v-b-modal.modalQR size="lg" class="showQR" variant="success">Show QR</b-button>
</div>
</tr>
</tbody>
</table>
</div>
Это мой мод, где я хочу иметь разные QR для каждого пользователя, который будет вставлен.
Ниже мой модал для Показать QR кнопку
<b-modal id="modalQR" title="Generated Details">
<div class="showQR text-center">
<qrcode-vue :value="results.url" :size="size" level="H"></qrcode-vue>
</div>
</b-modal>
и ниже мой сценарий
<script>
import QrcodeVue from "qrcode.vue";
import axios from "axios";
export default {
data() {
return {
search: "",
results: {},
value: "",
size: 200,
selected: [],
};
},
computed: {
filteredList() {
return this.results.filter(post =>
post.First_Name.toLowerCase().includes(this.search.toLowerCase())
);
}
},
methods: {
getUsers() {
axios
.get("localhost:9000/user/")
.then(response => (this.results = response.data))
.catch(error => console.log(error.message));
}
},
components: {
QrcodeVue
},
mounted() {
this.getUsers();
}
};
</script>