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

by

0👍

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>

Leave a comment