当在打字稿类组件的模板中使用“ @”进行事件绑定时，Vetur无法正确读取函数名称

问题描述

在某些情况下，vetur无法正确读取vue类组件函数的名称。例如，对于下面的类组件，vetur将说找不到“ nclick”。

<template>
  <span>
    <v-btn v-if="button"
      @click="onClick(button)">
      {{button.label}}
    </v-btn>
    <v-icon v-else-if="icon"
      @click="onClick(icon)">
    </v-icon>
  </span>
</template>

<script lang="ts">
import { ActionMetadata,ButtonAction,IconAction } from '@cat-squared/Meta-cat-ts/Metadata/types';
import { Component,Vue,Prop } from 'vue-property-decorator';

type ActionType =
  | IconAction
  | ButtonAction
  | (IconAction & {isActive?: boolean; activates: {rel: string}[] });

@Component({
  name: 'MetaAction',})
export default class extends Vue {
  private currentMetadata?: ActionMetadata

  @Prop()
  private Metadata?: ActionMetadata

  mounted() {
    this.currentMetadata = this.Metadata;
  }

  onClick(action?: ActionType) {
    this.$emit('action',action);
  }

  get button(): ButtonAction | undefined {
    return this.currentMetadata?.type === 'button' ? this.currentMetadata : undefined;
  }

  get icon(): IconAction | undefined {
    return this.currentMetadata?.type === 'icon' ? this.currentMetadata : undefined;
  }
}
</script>

使用此错误vetur将使您使用名称“ oonClick”，该名称在构建和测试时将失败。要恢复该错误，您需要在vue 2中使用基于类的组件，在这种情况下，我还使用了可能需要或不需要的vuetify。

解决方法

今天，我可以通过将点击处理程序移动到打开标签的同一行上来解决此问题。在某些情况下，也使用“ v-on：”解决​​了该问题，但上述示例没有解决此问题。

以下是上面的代码，没有任何错误：

<template>
  <span>
    <v-btn v-if="button" @click="onClick(button)">
      {{button.label}}
    </v-btn>
    <v-icon v-else-if="icon" @click="onClick(icon)">
    </v-icon>
  </span>
</template>

<script lang="ts">
import { ActionMetadata,ButtonAction,IconAction } from '@cat-squared/meta-cat-ts/metadata/types';
import { Component,Vue,Prop } from 'vue-property-decorator';

type ActionType =
  | IconAction
  | ButtonAction
  | (IconAction & {isActive?: boolean; activates: {rel: string}[] });

@Component({
  name: 'MetaAction',})
export default class extends Vue {
  private currentMetadata?: ActionMetadata

  @Prop()
  private metadata?: ActionMetadata

  mounted() {
    this.currentMetadata = this.metadata;
  }

  onClick(action?: ActionType) {
    this.$emit('action',action);
  }

  get button(): ButtonAction | undefined {
    return this.currentMetadata?.type === 'button' ? this.currentMetadata : undefined;
  }

  get icon(): IconAction | undefined {
    return this.currentMetadata?.type === 'icon' ? this.currentMetadata : undefined;
  }
}
</script>