Menampilkan Satu Data Laravel dan Vue.js

Menampilkan satu dan semua data pengguna sedikit berbeda dikarenakan Anda tidak akan menggunakan v-for untuk mengeluarkan datanya. Disini Anda akan melihat ilmu baru untuk mengambil id pengguna dari parameter rute yang bisa Anda lihat pada berkas router.js.

Daftar isi:

1. Skrip dasar

Skrip dibawah ini adalah templat untuk menampilkan tampil atau detail data pengguna, salin dan tempelkan pada berkas show.vue pada direktori users.

<template>
    <div class="level">
        <div class="level-left">
            <div class="level-item">
                <h1 class="title is-4">Tampil data pengguna</h1>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
                <router-link :to="{name: 'users.edit', params: {id: this.id}}" class="button is-light">Edit</router-link>
            </div>
            <div class="level-item">
                <router-link :to="{name: 'users.index'}" class="button is-light">Kembali</router-link>
            </div>
        </div>
    </div>
    
    <hr>

    // Skrip-1
</template>

<script>
export default {
    // Skrip-2
}
</script>

Catatan: Pada kasus ini ada skrip untuk tombol edit yang akan Anda pelajari pada langkah tutorial selanjutnya. Tombol tersebut memudahkan ketika Anda melihat detail pengguna yang tidak sesuai Anda bisa langsung pergi kehalaman edit untuk melakukan beberapa perubahan.

2. Menambahkan skrip

Skrip-1

Saya hanya menampilkan data pengguna seperti skrip dibawah ini yang mungkin terlihat sederhana, tetapi ini dasar yang perlu Anda ketahui. Salin dan tempelkan pada komentar skrip-1 pada skrip dasar diatas.

<div class="field">
    <label class="label">Nama Lengkap</label>
    <div class="control">
        <pre>{{ user.name }}</pre>
    </div>
</div>
<div class="field">
    <label class="label">Alamat E-Mail</label>
    <div class="control">
        <pre>{{ user.email }}</pre>
    </div>
</div>
<div class="field">
    <label class="label">CreatedAt</label>
    <div class="control">
        <pre>{{ new Date(user.created_at).toLocaleDateString() }}</pre>
    </div>
</div>
<div class="field">
    <label class="label">UpdatedAt</label>
    <div class="control">
        <pre>{{ new Date(user.updated_at).toLocaleDateString() }}</pre>
    </div>
</div>

Skrip-2

Kalau Anda ingin mengambil nilai pada parameter di rute Vue Router caranya dengan this.$route.params.id, perlu dikatahui id itu berupa parameter dari rute tersebut. Salin skrip dibawah ini pada komentar skrip-2 berdasarkan skrip dasar diatas.

data() {
    return {
        id: this.$route.params.id,
        user: {}
    }
},

mounted() {
    axios.get(`/api/users/${this.id}`).then(({ data }) => {
        this.user = data
    })
}

Menampilkan satu data pengguna

Skrip dibawah ini akan mengeluarkan data pengguna berdasarkan id pengguna yang dicari, salin dan tempelkan pada berkas UserController.php.

public function show($id)
{
    $user = User::find($id);

    return response()->json($user);
}

Pada tutorial ini Anda sudah banyak belajar bagaimana untuk membuat link rute yang menggunakan <router-link> baik dari memberikan nama rute dan memberikan parameter pada rute.

Sekarang waktunya Anda melihat bagaimana hasil yang Anda capai sejauh ini, tidak terasa ada 2 langkah lagi untuk menyelesaikan crud ini. Lihat hasil gambar dibawah ini untuk menampilkan detail data pengguna.

hasil