web-dev-qa-db-ja.com

Vuejs TypeScript this。$ refs。<refField> .valueは存在しません

TypeScriptでVueJsプロジェクトを書き換えているときに、TypeScriptエラーが発生しました。

これは、カスタムvモデルを持つコンポーネントの一部です。

Htmlの入力フィールドには「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>
javascripttypescriptvue.jsvuejs2vue-component
13
Rick

あなたはこれを行うことができます：

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

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

この問題から： https://github.com/vuejs/vue-class-component/issues/94

15
George

これは私のために働いた：(this.$refs.<refField> as any).valueまたは(this.$refs.['refField'] as any).value

2
user3377090

上記の答えはどれも、私がやろうとしていたことに対してうまくいきませんでした。次の$ refsプロパティを追加すると、それが修正され、予期したプロパティが復元されたようです。このgithubの投稿 にリンクされたソリューションが見つかりました。

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

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

ブラケット< >はJSXと競合するため、型キャストします。

代わりにこれを試してください

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

私はいつも覚えているというメモとして

TypeScriptは、型の安全性を確保するための強力な型付け機能を備えた単なるJavaScriptです。そう （通常） Xの型（var、paramなど）も予測もしません自動的に操作を型キャストしました。

また、TypeScriptのもう1つの目的は、JSコードをより明確/読みやすくすることです。そのため、可能な限り常に型を定義します。

1
DrSensor

たぶんそれは誰かに役立つでしょう。それはより美しく見え、型サポートを維持します。

HTML：

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

TS：

const inputValue = ((this.$refs.inputComment as Vue).$el as HTMLInputElement).value;
1
Семён Плевако

私はそれを機能させる方法を見つけましたが、私の意見ではopinionいです。

他の/より良い提案をしてください。

update() {
    this.$emit('input', {
        plate: (<any>this.$refs.plate).value,
    });
}
0
Rick