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

JavaScript Vue.js

神奇飞云

2020-03-16

</div>

用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>
</div>

第1805篇《Vue.jsTypeScriptthis。$ refs。 .value不存在》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>

共4个回答
米亚猴子 2020.03.16

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

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

例如

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

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

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

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

HTML：

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

TS：

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

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

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

  someMethod () {
    this.$refs.<element>.<attribute>
  }
}
Eva西里蛋蛋 2020.03.16

你可以这样做：

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android