Cara Passing Data Dari Datatable Ke Modal Pada Vue JS
Pada artikel ini, kami akan menunjukkan kepada Anda cara dengan mudah passing data dari daftar atau tabel ke modal di VueJs.
Sejak saya melakukan pengembangan web, salah satu situasi yang paling sering saya temui adalah ketika saya harus passing data dari daftar atau tabel dan menampilkannya secara sederhana.
Mari kita lihat bagaimana melakukannya dengan bantuan framework VueJs dengan contoh sederhana. Contoh ini menggunakan Bootstrap Vue dengan modal bawaan yang sudah siap.
Buat tabel
Pertama, buat daftar sederhana dalam bentuk tabel menggunakan beberapa data palsu.
Katakanlah Anda memiliki daftar pengguna dan mengklik tombol "more" mengungkapkan informasi tersembunyi tambahan tentang orang tertentu.
<div class="table-list">
<div
v-for="(user, index) in users"
:key="index"
class="my-3 bg-light p-3 "
>
<div class="row">
<div class="col">{{ user.firstname }}</div>
<div class="col">{{ user.lastname }}</div>
<div class="col">{{ user.age }}</div>
<div class="col">
<b-button @click="showDetails(user)">More</b-button>
</div>
</div>
</div>
</div>
Seperti yang Anda ketahui, untuk membuat daftar di VueJs Anda perlu menggunakan v-for untuk mengulang setiap objek dalam array.
Hasilnya adalah tabel yang menampilkan nama depan, nama belakang, usia, dan tombol "more" pengguna.
Jika Anda tidak memiliki data asli untuk ditampilkan di tabel, Anda dapat membuat data palsu.
users: [
{
firstname: "John",
lastname: "Smith",
age: 25,
about: "Lives in England.",
},
{
firstname: "Mary",
lastname: "Anderson",
age: 41,
about: "Likes nature and reading books.",
},
{
firstname: "Anthony",
lastname: "Adams",
age: 16,
about: "Study well and know what he wants.",
},
],
Buat modal
Ada banyak cara untuk membuat modal menggunakan CSS dan library lainnya, namun untuk contoh ini kita akan menggunakan modal Bootstrap.
<template>
<div>
<b-modal id="modal-details" hide-header>
<div class="d-block">
<h1>{{ user.firstname }}</h1>
<h3>{{ user.about }}</h3>
</div>
</b-modal>
</div>
</template>
<script>
export default {
name: "ModalDetails",
props: {
user: {
type: Object,
},
},
};
</script>
Praktik terbaiknya adalah membuat component Vue terpisah dan mengimportnya ke component parent.
Tapi pertama-tama, mari kita lihat component modal.
Template menampilkan nama pengguna dan informasi tambahan tentang pengguna ini. Seperti yang Anda lihat, untuk dapat menampilkannya, kita perlu menggunakan props yang berasal dari component induk (tabel).
Harap diperhatikan bahwa memperbaiki jenis prop Anda selalu baik, tetapi tidak wajib.
Menghubungkan Tabel dan Modals
Langkah terakhir dan terpenting adalah koneksi antara dua component dan pengiriman data dari satu component ke component lainnya.
Pertama, kita perlu mengimport modal ke component induk.
import ModalDetails from "@/components/ModalDetails.vue";
Dan tentu saja mendeklarasikannya dalam component.
components: {
ModalDetails,
}
Sangat penting untuk tidak memasukkan modal ke dalam loop v-for. Ini karena setiap klik membuka modal sebanyak panjang array.
Seperti yang telah Anda lihat, kami telah menambahkan acara klik ke tombol "more" dan menyetel parameter untuk pengguna.
Mari kita lihat apa yang dilakukan acara klik.
methods: {
showDetails(user) {
this.$bvModal.show("modal-details");
this.modalData = user;
},
},
- trigger pembukaan modal dengan id.
- atur pengguna ke beberapa variabel lain
Untuk membuat informasi tentang pengguna tertentu tersedia, kita perlu passing informasi ini sebagai props ke modal.
<ModalDetails :user="modalData" />
Dan tentunya jangan lupa untuk mendeklarasikan modalData di data Anda.
data() {
return {
modalData:null
}
}
terimakasih telah membaca tutorial ini, semoga bermanfaat