typescript Vuejs 打字稿 this.$refs.<refField>.value 不存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46505813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuejs typescript this.$refs.<refField>.value does not exist
提问by Rick
While rewriting my VueJs project in typescript, I came across a TypeScript error.
在用打字稿重写我的 VueJs 项目时，我遇到了打字稿错误。
This is a part of the component that has a custom v-model.
这是具有自定义 v-model 的组件的一部分。
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.
html 中的输入字段有一个名为“plate”的引用，我想访问它的值。该字段上的@input 调用下面编写的更新方法。
Typescript is complaining that value does not exist on plate.
打字稿抱怨盘子上不存在价值。
@Prop() value: any;
update() {
this.$emit('input',
plate: this.$refs.plate.value
});
}
template:
模板：
<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>
回答by George
You can do this:
你可以这样做：
class YourComponent extends Vue {
$refs: {
checkboxElement: HTMLFormElement
}
someMethod () {
this.$refs.checkboxElement.checked
}
}
From this issue: https://github.com/vuejs/vue-class-component/issues/94
从这个问题：https: //github.com/vuejs/vue-class-component/issues/94
回答by John Snow
Edit - 2020-04:
编辑 - 2020-04：
The vue-property-decoratorlibrary provides @Refwhich I recommend instead of my original answer.
该vue-property-decorator库提供@Ref我建议我原来的答案，而不是。
import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
@Ref() readonly anotherComponent!: AnotherComponent
@Ref('aButton') readonly button!: HTMLButtonElement
}
Original Answer
原答案
None of the above answers worked for what I was trying to do. Adding the following $refs property wound up fixing it and seemed to restore the expected properties. I found the solution linked on this github post.
以上答案都不适用于我想要做的事情。添加以下 $refs 属性最终修复它并似乎恢复了预期的属性。我在这个 github 帖子上找到了链接的解决方案。
class YourComponent extends Vue {
$refs!: {
vue: Vue,
element: HTMLInputElement,
vues: Vue[],
elements: HTMLInputElement[]
}
someMethod () {
this.$refs.<element>.<attribute>
}
}
回答by user3377090
This worked for me: use
(this.$refs.<refField> as any).valueor (this.$refs.['refField'] as any).value
这对我有用：使用
(this.$refs.<refField> as any).value或(this.$refs.['refField'] as any).value
回答by DrSensor
Avoid using bracket < >to typecast because it will conflict with JSX.
避免使用括号< >进行类型转换，因为它会与 JSX 冲突。
Try this instead
试试这个
update() {
const plateElement = this.$refs.plate as HTMLInputElement
this.$emit('input', { plate: plateElement.value });
}
as a note that I always keep remembering
作为我一直记得的笔记
Typescript is just Javascript with strong typing capability to ensure type safety. So (usually)it doesn't predict the type of X (var, param, etc) neither automaticallytypecasted any operation.
Typescript 只是具有强大类型功能以确保类型安全的 Javascript。因此（通常）它不会预测 X 的类型（var、param 等），也不会自动对任何操作进行类型转换。
Also, another purpose of the typescript is to make JS code became clearer/readable, so always define the type whenever is possible.
此外，打字稿的另一个目的是使 JS 代码变得更清晰/可读，所以总是尽可能定义类型。
回答by Семён Плевако
Maybe it will be useful to someone. It looks more beautiful and remains type support.
也许这对某人有用。它看起来更漂亮，并保持类型支持。
HTML:
HTML：
<input ref="inputComment" v-model="inputComment">
TS:
TS：
const inputValue = ((this.$refs.inputComment as Vue).$el as HTMLInputElement).value;
回答by Anonymous Creator
In case of custom component method call,
在自定义组件方法调用的情况下，
we can typecast that component name, so it's easy to refer to that method.
我们可以对该组件名称进行类型转换，因此很容易引用该方法。
e.g.
例如
(this.$refs.annotator as AnnotatorComponent).saveObjects();
where AnnotatorComponent is class based vue component as below.
其中 AnnotatorComponent 是基于类的 vue 组件，如下所示。
@Component
export default class AnnotatorComponent extends Vue {
public saveObjects() {
// Custom code
}
}
回答by Rick
I found a way to make it work but it is ugly in my opinion.
我找到了一种使它工作的方法，但在我看来它很丑陋。
Feel free to give other/better suggestions.
随意提供其他/更好的建议。
update() {
this.$emit('input', {
plate: (<any>this.$refs.plate).value,
});
}
