How can I click on a user and view user data?

Question

I'm working on a project using VueJS and I need the following:

Use the API and get the list of users in the home page.

When a user's button is clicked, I need to redirect to another component and output that user's details (only the details of the user I clicked) in that component.

This is a table that displays user information

 <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 function in method

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

I created a dynamic route

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

Unable to create DoctorDetails and display data

Answer 1

I recommend you try using router push first.
So please use

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

Make sure your router is set up correctly Thanks to your Vue development tools, you have the correct state.

Also, make sure there is something on DoctorDetails to get the user's data.