Vue.js打字稿this.$ refs.< refField> .value不存在 [英] Vuejs typescript this.$refs.<refField>.value does not exist

问题描述

在用打字稿重写我的VueJs项目时，我遇到了打字稿错误.

While rewriting my VueJs project in typescript, I came across a TypeScript error.

这是具有自定义v模型的组件的一部分.

This is a part of the component that has a custom v-model.

html中的输入字段有一个称为"plate"的引用，我想访问该值.该字段上的@input调用下面编写的更新方法.

An input field in the html has a ref called 'plate' and I want to access the value of that. The @input on that field calls the update method written below.

Typescript抱怨标牌上不存在该值.

Typescript is complaining that value does not exist on plate.

@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>

推荐答案

您可以执行以下操作:

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

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

从此问题开始: https://github.com/vuejs/vue- class-component/issues/94

这篇关于Vue.js打字稿this.$ refs.< refField> .value不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！