Wie kann ich auf einen Benutzer klicken und Benutzerdaten anzeigen?

Question

Ich arbeite an einem Projekt mit VueJS und benötige Folgendes:

Verwenden Sie die API und rufen Sie die Benutzerliste auf der Startseite ab.

Wenn auf die Schaltfläche eines Benutzers geklickt wird, muss ich zu einer anderen Komponente umleiten und die Details dieses Benutzers (nur die Details des Benutzers, auf den ich geklickt habe) in dieser Komponente ausgeben.

Dies ist eine Tabelle mit Benutzerinformationen

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

Funktion in Methode anzeigen

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

Ich habe eine dynamische Route erstellt

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

DoctorDetails können nicht erstellt und Daten angezeigt werden

Answer 1

我建议您首先尝试使用路由器推送。
因此请使用

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

确保您的路由器已正确设置+感谢您的 Vue 开发工具，您拥有正确的状态。

此外，请确保在 DoctorDetails 上有一些东西可以获取用户的数据。