如何解决在Vue中将组件作为道具路由
我想截取传递给路线的数字:
routes: [{ path: '/user/:id',component: User }]
并在User
组件中获取道具:
export default {
props: {
id: Number
}
}
不幸的是,我收到此错误:
Invalid prop: type check Failed for prop "id". Expected Number with value 2,got
String with value "2".
有没有一种方法可以将值自然转换为数字?我看着https://github.com/posva/vue-coerce-props,但我觉得不用另外扩展就可以做到。
解决方法
通常的模式是使用计算属性,该属性将prop转换为您要用于组件的形式。您还必须更新prop定义,以允许同时使用字符串和数字。
export default {
props: {
id: {
validator(value) {
return !isNaN(parseInt(propVal));
}
}
},computed: {
parsedId() {
return parseInt(this.id);
}
}
}
然后在其余的代码中,您将使用parsedId
而不是id
,这显然是不理想的。有一个open RFC可以通过允许您为道具定义单独的内部和外部名称来解决此问题。
实际上,对于vue-router,请看一下路由定义中的props function。它应该允许您将路线参数映射到所需的道具结构中。
我认为类似的方法会起作用。
routes: [{
path: '/user/:id',component: User,props: route => ({ id: parseInt(route.params.id) })
}]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。