Vue Typescript Flatpickr this. $ Refs.field нельзя назначить параметру типа 'строка' - PullRequest
Новая
       13

Vue Typescript Flatpickr this. $ Refs.field нельзя назначить параметру типа 'строка'

0 голосов
/ 04 апреля 2019

Typescript в Vue с Flatpickr и Veevalidate в качестве пакета.

Ошибка : this.fp = new Flatpickr(this.$refs.field, {})

ОШИБКА : Аргумент типа 'Элемент |Элемент [] |Vue |Vue [] 'нельзя назначить параметру типа' string '.Тип «Элемент» не может быть назначен типу «строка». 

<template>
  <div>
    <label :for="name">{{ name }}</label>
     <input
      v-validate="validation"
      :name="name"
      :id="name"
      v-model="name"
      :placeholder="name"
      ref="field"
      type="text"
      value="value"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Flatpickr from 'flatpickr'

@Component({})
export default class BaseDate extends Vue {
  @Prop()
  name!: string

  @Prop({ default: '' })
  validation!: string

  @Prop()
  model!: string

  @Prop()
  validator!: any

  fp: any

  mounted (): void {
    this.$validator = this.validator
    this.fp = new Flatpickr(this.$refs.field, {})
  }
}
</script>

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

Просто приведите аргумент к Element (или Node): 

this.fp = new Flatpickr(this.$refs.field as Element, {})

Flatpickr Конструктор ожидает аргумент с типом Node | Node[] | string. TypeScript не может преобразовать тип $refs в ожидаемый; 

export interface FlatpickrFn {
  (selector: Node, config?: Options): Instance;
  (selector: ArrayLike<Node>, config?: Options): Instance[];
  (selector: string, config?: Options): Instance | Instance[];
  defaultConfig: Partial<ParsedOptions>;
  l10ns: { [k in LocaleKey]?: CustomLocale } & { default: Locale };
  localize: (l10n: CustomLocale) => void;
  setDefaults: (config: Options) => void;
  parseDate: (
    date: DateOption,
    format?: string,
    timeless?: boolean
  ) => Date | undefined;
  formatDate: (date: Date, format: string) => string;
  compareDates: (date1: Date, date2: Date, timeless?: boolean) => number;
}
0 голосов
/ 05 апреля 2019

Это было окончательное решение, которое действовало для меня: 

this.fp = new (Flatpickr as any)(this.$refs.field as Element, {})
...