Vetur is not reading the function name correctly when '@' is used for event binding in template of a typescript class component

Question

In some cases vetur does not correctly read the name of a vue class component function. For example with the class component below, vetur will say that 'nclick' cannot be found.

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

With this error vetur will let you use the name 'oonClick' which will fail on build and test. To repo the error you need to be using class based components with vue 2 and in this case I was also using vuetify which may or may not be required.

Answer 1

I was able to work around this issue today by either moving the click handler to the same line that the tag is opened on. Also using 'v-on:' fixed the issue in some cases, but not with the sample above.

Here is the above code without any errors:

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