当“@”用于打字稿类组件模板中的事件绑定时，Vetur 未正确读取函数名称

Posted 2023-02-22

【中文标题】当“@”用于打字稿类组件模板中的事件绑定时，Vetur 未正确读取函数名称

【英文标题】：Vetur is not reading the function name correctly when '@' is used for event binding in template of a typescript class component

【发布时间】：2021-01-09 22:47:18

【问题描述】：

在某些情况下，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。

【参考方案1】：

我今天能够通过将点击处理程序移动到打开标签的同一行来解决这个问题。在某些情况下也使用 '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>