vue.js - Vue:创建方法中的参数值不会改变
问题描述
我有这个链接到另一个带有 params 的组件:
<div class="dropdown-menu bg-light" aria-labelledby="navbarDropdown">
<div v-for="category in categories" :key="category.id">
<div v-if="lang=='ku'"><li><a class="dropdown-item font-weight-bold py-2" href="#" ><router-link :to="{name:'category',params:{id:category.id}}">{{category.catagory_ku}}</router-link></a></li></div>
<div v-else><li><a class="dropdown-item font-weight-bold py-2" href="#" ><router-link :to="{name:'category',params:{id:category.id}}">{{category.catagory_ar}}</router-link></a></li></div>
</div>
</div>
像这样的类别组件:
<template>
<div style="margin-top:132px">
Categories {{id}}
</div>
</template>
<script>
export default {
data(){
return {
id :''
}
},
created(){
this.id=this.$route.params.id
}
}
</script>
当我按下路由链接时,url 中的 id 值发生了变化,但在页面视图中,它只取了我点击的第一个 id 值,并且在我点击了另一个相同的链接后,我点击了不同的 id 值并没有改变
解决方案
尝试定义id
as 计算属性:
<template>
<div style="margin-top:132px">
Categories {{id}}
</div>
</template>
<script>
export default {
computed:{
id(){
return this.$route.params.id
}
}
}
</script>
推荐阅读
- bash - 有没有办法只使用厨师编辑 /etc/passwd 文件上的 GID?
- javascript - sendBeacon 在 beforeunload 处理程序中不起作用
- angular - Angular 依赖项最佳实践 - 是否可以在 component.html 中引用 ts 文件而不是其 component.ts?
- javascript - HTML、CS、JS 中的移动弹出窗口
- angularjs - 错误:未捕获(承诺):TypeError:PlotlyService_1._plotly.purge 不是函数
- java - 如何在我的位置跟踪应用程序中移动 GPS 距离?安卓、java
- javascript - 待办事项列表的本地存储问题
- javascript - 检查自定义协议是否存在
- javascript - 如何停止正在运行的 setInterval
- foreach - For-Each 模块中的 Terraform 参考项