vue.js - @click 不会触发 vue.js 的标题链接
问题描述
我想将标头文本更改为我所在的当前路线名称。它仅适用于组件安装,并且不会在单击时触发。如何让 changeHeaderTitle 从路由器创建的按钮单击运行?
<template>
<div>
<nav class="navigation--navbar">
<router-link
class="navigation--links"
v-for="routes in links"
v-bind:key="routes.id"
@click='changeHeaderTitle'
:to="`${routes.page}`"
>{{routes.text}}</router-link>
</nav>
<div class="header--headline">
<h2 class="header--headline-text">{{headerTitle}}</h2>
</div>
</div>
</template>
<script>
export default {
name: 'Navigation',
data () {
return {
headerTitle: 'Boop',
links: [
{
id: 0,
text: 'Home',
page: '/Home'
},
{
id: 1,
text: 'Tutoring',
page: '/Tutoring'
}
]
}
},
methods: {
changeHeaderTitle: function () {
if (this.$route.path === '/') {
this.headerTitle = 'Home Header Here'
} else {
let routeName = this.$route.path.split('/')
this.headerTitle = routeName[1]
}
}
},
mounted: function () {
this.changeHeaderTitle()
}
}
</script>
解决方案
看起来你需要添加.native
修饰符。做:
<router-link
class="navigation--links"
v-for="routes in links"
v-bind:key="routes.id"
@click.native='changeHeaderTitle'
:to="`${routes.page}`"
>
{{routes.text}}
</router-link>
推荐阅读
- php - 谷歌日历 API。无法连接到其他用户日历
- laravel - Laravel 手动身份验证不适用于客户模型
- ios - 推送 UIViewController
- rhel - 没有主目录时如何运行 podman?
- javascript - 节点:更新数据时出错:user.update:返回 null
- c# - c# selenium 自动化。如果我的网站出现故障,请向我的 ID 发送邮件
- android - RecycleView 中的位置视图不正确
- ruby-on-rails - Heroku CI Pipeline - 在构建之间缓存 gem
- python - 更改列表列表中的数据类型
- jestjs - 超测 POST 请求挂起