javascript - Vue.js - 从一个组件切换到另一个
问题描述
我对 vue.js 很陌生。我有一个页面,其中列出了人员列表的详细信息,每个人都有一个“编辑”按钮。当我单击编辑按钮时,我想切换到另一个页面,该页面显示用于编辑所选人员详细信息的表单。
我不确定这样做的最佳方法是什么。我在我的解决方案中使用 Bootstrap 和路由器。
选项 1:我认为单击“编辑”按钮时路由到“/person/:id”会很简单,但不确定如何通过单击处理程序方法执行此操作。
选项 2:下面是主要组件,我试图在接收到来自任一组件的事件时在两个组件“PersonsList”和“EditPersonData”之间切换。PersonsList 正在成功发出事件,但我不确定如何在这里收听并切换到 EditPesonData 组件。
主页.vue
<template>
<div class="home">
<h1 class='home-text'>
{{message}}
</h1>
<component v-bind:is="component"/>
</div>
</template>
<script>
import PersonsList from '@/components/PersonsList'
import EditPersonData from '@/components/EditPersonData'
export default {
name: 'Home',
data() {
return {
message: 'Welcome to Person Details!',
component: "PersonsList"
}
},
components: {
PersonsList,
EditPersonData
}
};
</script>
任何帮助将不胜感激。
谢谢
解决方案
最好的方法是在 route中发送id
as a 。为此,您可以附加每个列表项的 id,例如:param
/person/:id
<div v-for="(user,index) in userList" :key="index">
<a :href="'/person/' + user.id">Edit</a>
</div>
然后,您将在其他组件中获取它,this.$route.params.id
以便获取有关此 id 用户的更多详细信息。
确保使用 id 参数在路由器中定义路由,如下所示:person/:id
更新 :
如果要更改click
函数的路由:
<b-btn @click="editPerson(user.id)">Edit</b-btn>
在方法中,添加如下函数:
editPerson(userId){
this.$router.push({
name: 'person',
params: { id: userId }
});
}
推荐阅读
- python - 从 pandas 数据框创建图形(网络)
- javascript - 如何在Angular中更新表格的单个单元格?
- python - 使用正则表达式 python 和 re.compile 识别 .c 文件或文本文件中的特定模式
- php - Woocommerce 网站 6-7 秒页面加载
- javascript - 如何从express中的异步sqlite查询返回布尔值?
- node.js - 无法让 puppeteer 重用同一浏览器浏览新收集的链接
- python - 如何在 scala 中读取包含在 python 中的长数字
- xpath - 无法使用 xpath 编码匹配精确符号“&”“<”“>”
- javascript - 如何将 eval(ID) 从列表视图传递到 asp.net 上的模式弹出窗口
- python - 使用特定列将抓取的数据导出到 CSV