如何点击用户并查看用户数据?
P粉448346289
P粉448346289 2024-03-28 19:01:02
0
1
387

我正在使用 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 并显示数据

P粉448346289
P粉448346289

全部回复(1)
P粉268654873

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

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!