Vue.jsTypeScriptthis。$ refs。<refField> .value不存在

神奇飞云2020-03-16

用TypeScript重写VueJs项目时，遇到了TypeScript错误。

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

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

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>

米亚猴子2020/03/16 15:29:28

如果是自定义组件方法调用，

我们可以键入该组件的名称，因此很容易引用该方法。

例如

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

其中AnnotatorComponent是基于类的vue组件，如下所示。

@Component
export default class AnnotatorComponent extends Vue {
    public saveObjects() {
        // Custom code
    }
}

JinJin猴子2020/03/16 15:29:28

也许对某人有用。它看起来更漂亮，并保持类型支持。

HTML：

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

TS：

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

Mandy宝儿2020/03/16 15:29:28

以上答案均不适用于我想做的事情。添加以下$ refs属性可以修复该问题，并且似乎可以恢复预期的属性。我在此github帖子上找到了链接的解决方案。

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

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

Eva西里蛋蛋2020/03/16 15:29:28

你可以这样做：

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

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer