Машинопись Vuejs этого.$refs.< реффилд>.ценность не существует


Машинопись Vuejs этого.$refs.&lt; реффилд&gt;.ценность не существует

30.09.2017 09:28:03 Просмотров 32 Источник

Переписывая свой проект VueJs в typescript, я наткнулся на ошибку TypeScript.

Это часть компонента, который имеет пользовательскую v-модель.

Поле ввода в html имеет ref под названием 'plate', и я хочу получить доступ к его значению. @Input в этом поле вызывает метод обновления, описанный ниже.

Typescript жалуется, что значение не существует на пластине.

@Prop() value: any;

update() {
    this.$emit('input',
        plate: this.$refs.plate.value
    });
}

шаблон:

<template>  
<div>
    <div class="form-group">
        <label for="inputPlate" class="col-sm-2 control-label">Plate</label>

        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputPlate" ref="plate" :value="value.plate" @input="update">
        </div>
    </div>

</div>
</template>
У вопроса есть решение - Посмотреть?

Ответы - Машинопись Vuejs этого.$refs.&lt; реффилд&gt;.ценность не существует / Vuejs typescript this.$refs.<refField>.value does not exist

Rick

01.10.2017 11:15:38

Я нашел способ заставить его работать, но это уродливо, на мой взгляд.

Не стесняйтесь давать другие / лучшие предложения.

update() {
    this.$emit('input', {
        plate: (<any>this.$refs.plate).value,
    });
}
Является ответом!
George

17.03.2018 06:08:50

Вы можете это сделать:

class YourComponent extends Vue {
  $refs: {
    checkboxElement: HTMLFormElement
  }

  someMethod () {
    this.$refs.checkboxElement.checked
  }
}

Из этого вопроса: https://github.com/vuejs/vue-class-component/issues/94

DrSensor

18.03.2018 04:52:45

Избегайте использования кронштейна < > продолжать относиться, потому что это приведет к конфликту с JSX.

Попробуйте вместо этого

update() {
    const plateElement = this.$refs.plate as HTMLInputElement
    this.$emit('input', { plate: plateElement.value });
}

как заметка, которую я всегда помню

Typescript-это просто Javascript с мощной возможностью набора текста для обеспечения безопасности типа. Поэтому (обычно) он не предсказывает тип X (var, param и т. д.) и не автоматически типизирует какую-либо операцию.

Кроме того, еще одна цель typescript-сделать код JS более четким/читаемым, поэтому всегда определяйте тип, когда это возможно.

user3377090

25.07.2018 08:38:06

Это сработало для меня: используйте (this.$refs.<refField> as any).value или (this.$refs.['refField'] as any).value

Семён Плевако

13.02.2019 10:21:56

Может быть, это кому-то и пригодится. Он выглядит более красивым и остается опорой типа.

HTML:

<input ref="inputComment" v-model="inputComment">

ТС:

const inputValue = ((this.$refs.inputComment as Vue).$el as HTMLInputElement).value;
John Snow

28.05.2019 08:55:27

Ни один из вышеприведенных ответов не работал для того, что я пытался сделать. Добавление следующего свойства $refs привело к его исправлению и, казалось, восстановило ожидаемые свойства. Я нашел решение, связанное с этим постом на github.

class YourComponent extends Vue {
  $refs!: {
    vue: Vue,
    element: HTMLInputElement,
    vues: Vue[],
    elements: HTMLInputElement[]
  }

  someMethod () {
    this.$refs.<element>.<attribute>
  }
}
Anonymous Creator

14.03.2020 11:48:43

В случае вызова метода пользовательского компонента,

мы можем типизировать это имя компонента, поэтому легко ссылаться на этот метод.

напр.

(this.$refs.annotator as AnnotatorComponent).saveObjects();

где Annotatorcontent-это компонент vue на основе класса, как показано ниже.

@Component
export default class AnnotatorComponent extends Vue {
    public saveObjects() {
        // Custom code
    }
}
Помочь в развитии проекта:
Закрыть X