dicem
@dicem

Как решить ошибку с биндом события на компоненте?

Есть кастомный компонент кнопки
import { Component, Prop } from 'vue-property-decorator';
import { VueComponent } from '@/shims-vue';

import './Button.less'

interface Props {
  tool?: boolean,
  wide?: boolean
}

@Component
export default class Button extends VueComponent<Props> {

  @Prop(Boolean) tool?: string;
  @Prop(Boolean) wide?: boolean;

  get className() {
    const wide = this.wide ? 'button_wide' : ''
    const tool = this.tool ? 'button_tool' : ''
    return ['button', wide, tool].join(' ').trim()
  }

  render() {
    return (
      <button class={this.className} onClick={() => this.$emit('onClick')}>
        { this.$slots.default }
      </button>
    )
  }
}


И когда я пытаюсь забиндить событие на этот компонент
<Button
  wide={i === arr.length}
  onClick={this.remoteInputNumber(num)}
>
  {num}
</Button>

TypeScript начинает жаловаться следующим образом:
(JSX attribute) onClick: number

No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): Button', gave the following error.
    Type '{ wide: boolean; onClick: number; }' is not assignable to type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
      Property 'onClick' does not exist on type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): Button', gave the following error.
    Type '{ wide: boolean; onClick: number; }' is not assignable to type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
      Property 'onClick' does not exist on type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> | undefined): Button', gave the following error.
    Type '{ wide: boolean; onClick: number; }' is not assignable to type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
      Property 'onClick' does not exist on type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.ts(2769)



Что я делаю не так?
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ответы на вопрос 2
no_one_safe
@no_one_safe
@click
Ответ написан
@skyholder
onClick={() => this.$emit('onClick')}

я в TSX тоже не шарю, но тут точно нужна стрелочная функция? в обычных .vue файлах emit срабатывает и без оборачивания в функцию
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы