NuxtJS Typescript click.native';无法读取属性';测试';空值';
我已经在nuxtjs中创建了一个自定义导航栏,如果我想在单击n链接时关闭导航栏,我会得到以下错误:无法读取null的属性“test”。 我正在使用nuxt属性装饰依赖项 我的代码:NuxtJS Typescript click.native';无法读取属性';测试';空值';,typescript,vue.js,nuxt.js,Typescript,Vue.js,Nuxt.js,我已经在nuxtjs中创建了一个自定义导航栏,如果我想在单击n链接时关闭导航栏,我会得到以下错误:无法读取null的属性“test”。 我正在使用nuxt属性装饰依赖项 我的代码: <template> <!-- MOBILE NAVBAR --> <nav class="navbar"> <mq-layout mq="sm" class="navbar-wrapper" :cl
<template>
<!-- MOBILE NAVBAR -->
<nav class="navbar">
<mq-layout mq="sm" class="navbar-wrapper" :class="$mq">
<button class="navbar-dropdown-button-mobile" @click="this.toggleDropdownMenu"> <!-- set dropdown enabled / disabled -->
<picture>
<img
class="navbar-dropdown-img-mobile"
src="@/assets/icons/dropdown_menu_button.png"
alt="Menu"
/>
</picture>
</button>
</mq-layout>
<!-- ... Other Code -->
<!-- DROPDOWN -->
<mq-layout mq="sm" class="navbar-dropdown-menu-mobile" v-if="this.showDropdownMenu"> <!-- show/hide dropdown depending on showDropDownMenu boolean -->
<n-link class="navbar-link-mobile" :class="$mq" to="/" prefetch>LINK</n-link>
<n-link class="navbar-link-mobile" :class="$mq" @click.native="this.test" to="/pricing" prefetch>LINK</n-link> <!-- This @click.native thorws this error -->
<n-link class="navbar-link-mobile" :class="$mq" to="/documentation" prefetch>LINK</n-link>
<n-link class="navbar-link-mobile" :class="$mq" to="/support" prefetch>LINK</n-link>
</mq-layout>
<!-- ... Other Code -->
</nav>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'nuxt-property-decorator';
@Component({})
export default class NavbarComponent extends Vue {
protected showDropdownMenu: boolean = false;
protected toggleDropdownMenu() {
this.showDropdownMenu = !this.showDropdownMenu;
}
test() {
console.log("HIIIIII")
}
}
</script>
链接
链接
链接
链接
从“Vue”导入Vue;
从'nuxt property decorator'导入{Component};
@组件({})
导出默认类NavbarComponent扩展Vue{
受保护的showDropdownMenu:boolean=false;
受保护的切换下拉菜单(){
this.showDropdownMenu=!this.showDropdownMenu;
}
测试(){
控制台日志(“HIIIIII”)
}
}
不要在Vue文件的模板中使用此
<n-link class="navbar-link-mobile" :class="$mq" @click.native="test" to="/pricing" prefetch>LINK</n-link>
链接
您是否尝试了@click.native=“test”
?