web-dev-qa-db-fra.com

Vuejs TypeScript this. $ Refs. <refField> .value n'existe pas

Lors de la réécriture de mon projet VueJs en TypeScript, je suis tombé sur une erreur TypeScript.

C'est une partie du composant qui a un modèle en v personnalisé.

Un champ de saisie dans le html a une référence appelée "plaque" et je veux accéder à la valeur de cela. Le @input sur ce champ appelle la méthode de mise à jour écrite ci-dessous.

TypeScript se plaint que la valeur n'existe pas sur la plaque.

@Prop() value: any;

update() {
    this.$emit('input',
        plate: this.$refs.plate.value
    });
}

modèle:

<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

Tu peux le faire:

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

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

De ce numéro: https://github.com/vuejs/vue-class-component/issues/94

15
George

Cela a fonctionné pour moi: utilisez (this.$refs.<refField> as any).value ou (this.$refs.['refField'] as any).value

2
user3377090

Aucune des réponses ci-dessus n'a fonctionné pour ce que j'essayais de faire. L'ajout de la propriété $ refs suivante a fini par la réparer et a semblé restaurer les propriétés attendues. J'ai trouvé la solution liée sur ce post github.

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

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

Évitez d'utiliser le support < > à transtyper car il entrera en conflit avec JSX.

Essayez ceci à la place

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

comme une note dont je me souviens toujours

TypeScript est juste Javascript avec une forte capacité de frappe pour assurer la sécurité du type. Donc (d'habitude) il ne prédit pas le type de X (var, param, etc.) ni automatiquement transtypé aucune opération.

De plus, un autre objectif du TypeScript est de rendre le code JS plus clair/lisible, donc définissez toujours le type chaque fois que cela est possible.

1
DrSensor

Ce sera peut-être utile à quelqu'un. Il a l'air plus beau et reste de type support.

HTML:

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

TS:

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

J'ai trouvé un moyen de le faire fonctionner mais c'est moche à mon avis.

N'hésitez pas à donner d'autres/meilleures suggestions.

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