如何點擊用戶並查看用戶資料？

Question

我正在使用 VueJS 做一個項目，我需要以下內容：

使用 API 並取得主頁中的使用者清單。

當您單擊使用者的按鈕時，我需要重定向到另一個元件並在該元件中輸出該使用者的詳細資訊（僅我單擊的使用者的詳細資訊）。

這是顯示使用者資訊的表格

 <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>

視圖函數在方法中

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

我建立了一條動態路線

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

無法建立 DoctorDetails 並顯示資料

Answer 1

我建議您先嘗試使用路由器推送。
因此請使用

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

確保您的路由器已正確設定 感謝您的 Vue 開發工具，您擁有正確的狀態。

此外，請確保在 DoctorDetails 上有一些東西可以取得使用者的資料。