Comment puis-je cliquer sur un utilisateur et afficher ses données ?

Question

Je travaille sur un projet utilisant VueJS et j'ai besoin des éléments suivants :

Utilisez l'API et obtenez la liste des utilisateurs sur la page d'accueil.

Lorsque l'on clique sur le bouton d'un utilisateur, je dois rediriger vers un autre composant et afficher les détails de cet utilisateur (uniquement les détails de l'utilisateur sur lequel j'ai cliqué) dans ce composant.

Ceci est un tableau affichant les informations utilisateur

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

Fonction Afficher dans la méthode

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

J'ai créé un parcours dynamique

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

Impossible de créer DoctorDetails et d'afficher les données

Answer 1

Je vous recommande d'essayer d'abord le routeur push.
Alors s'il vous plaît, utilisez

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

Assurez-vous que votre routeur est correctement configuré + grâce à vos outils de développement Vue, vous avez le bon état.

Assurez-vous également qu'il y a quelque chose sur DoctorDetails qui récupère les données de l'utilisateur.