Bagaimanakah saya boleh mengklik pada pengguna dan melihat data pengguna?

Question

Saya sedang mengusahakan projek menggunakan VueJS dan saya memerlukan perkara berikut:

Gunakan API dan dapatkan senarai pengguna di halaman utama.

Apabila butang pengguna diklik, saya perlu mengubah hala ke komponen lain dan mengeluarkan butiran pengguna tersebut (hanya butiran pengguna yang saya klik) dalam komponen itu.

Ini ialah jadual yang menunjukkan maklumat pengguna

 <v-data-table hide-actions flat :headers="headers" :items="doctors">
        <template v-slot:items="props">
          <td>{{ props.index + 1 }}</td>
          <td>{{ props.item.profile.full_name }}</td>
          <td>{{ props.item.email }}</td>
          <td>{{ props.item.username }}</td>
          <td>{{ props.item.updated_at }}</td>
         <td> 
          <v-btn outline small color="indigo" @click="view(props.item)">
                                <i class="fa fa-eye"></i> &nbsp; make payment
                            </v-btn>
         </td>


        </template>
        <template v-slot:no-results>
          <h6 class="grey--text">No data available</h6>
        </template>
      </v-data-table>

Lihat fungsi dalam kaedah

 view() {
            window.open(`/finance/pay-doctors/${item.id}`, "_blank");
        },

Saya mencipta laluan dinamik

 { path: '/finance/pay-doctors/:id', component: DoctorDetails}

Tidak dapat mencipta DoctorDetails dan memaparkan data

Answer 1

Saya syorkan anda mencuba tekan penghala dahulu.
Jadi sila gunakan

<script>
export default {
    methods: {
        view(id) {
            this.$router.push({ path: `/finance/pay-doctors/${item.id}` })
        }
    }
}
</script>

Pastikan penghala anda disediakan dengan betul + terima kasih kepada alatan Vue dev anda, anda mempunyai keadaan yang betul.

Selain itu, pastikan ada sesuatu pada DoctorDetails yang mendapat data pengguna.