NuxtJS Typescript click.native '无法读取 null 的属性'测试''

Posted 2023-02-22

【中文标题】NuxtJS Typescript click.native \'无法读取 null 的属性\'测试\'\'

【英文标题】：NuxtJS Typescript click.native 'cannot read property 'test' of null'NuxtJS Typescript click.native '无法读取 null 的属性'测试''

【发布时间】：2020-10-10 14:56:19

【问题描述】：

我在 nuxtjs 中创建了一个自定义导航栏，如果我想在单击 n 链接时关闭导航栏，我会收到此错误：无法读取 null 的属性“测试”。 我正在使用 nuxt-property-decorator 依赖项。

我的代码：

<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"
            
          />
        </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>

【问题讨论】：

你试过@click.native="test"吗？

【参考方案1】：

不要在 Vue 文件的模板中使用 this。

<n-link class="navbar-link-mobile" :class="$mq" @click.native="test" to="/pricing" prefetch>LINK</n-link>

https://vuejs.org/v2/guide/events.html