javascript - 如何在 router.push() (Vue.js) 中将参数从一个组件传递到另一个组件?
问题描述
我正在实现一个功能,用户单击编辑按钮(存在于一行内),该行中的所有详细信息都应该传递给表单组件,我应该从参数中获取这些字段的默认值。我不知道如何实现这个......有人可以提出解决方案吗?
----------inside table component------------------
edit_row(id){
// alert("deleting row " + id);
var d_fname = this.users[id].fname;
var d_lname = this.users[id].lname;
var d_tech = this.users[id].tech;
this.$router.push({name: 'form/', params: {d_fname, d_lname, d_tech}});
// this.$router.push({name:'/form1', params:{d_fname, d_lname, d_tech}});
}
----------------inside form component------------------------
<template>
<form id="form">
<h4>Personal Information</h4>
<br />
<input type="text" placeholder="First Name" v-model="fname" />
<p>{{user_info}}</p>
<br />
<input type="text" placeholder="Last Name" v-model="lname" />
<br />
<input type="text" placeholder="Technologies" v-model="tech" />
<br />
<button type="button" value="submit" @click="submit_info()">Submit</button>
</form>
</template>
<script>
export default {
name: "form1",
props:["d_fname", "d_lname", "d_tech"],
data() {
return {
fname: "",
lname: "",
tech: ""
};
}
}
解决方案
您需要将 params 对象中的参数作为键值传递,还需要在路由声明中将 props 设置为 true。
{path: "form/", name:"form", component: FormComponent, props: true}
你应该参考这个。
推荐阅读
- regex - 正则表达式匹配电话号码
- php - 更新数据库架构时不允许空值
- powershell - 更改运行 power shell 脚本时运行的函数
- xamarin.forms - AADSTS54005:OAuth2 授权代码已兑换,请使用新的有效代码重试或使用现有的刷新令牌
- javascript - 谷歌图表一直在绘制
- android - 有没有办法从 PagedList 中删除项目并通知 RecyclerView?
- node.js - 如何获取 Firebase 函数请求大小?
- c# - 没有通用方法“ThenBy”
- r - 将字符串转换为具有不同数量元素的数据框
- javascript - 如何在 ReactJS 中打开 Order