Vue js : Dépannage - Lecture de la propriété '$refs' de undefined

Question

Obtention d'une erreur Impossible de lire la propriété non définie (lecture de '$refs') même si j'ai une référence dans le modèle. Cela signifie-t-il que je dois utiliser les hooks de montage Vue ?

<div class="input-wrapper">
   <input type="text" id="phone" placeholder="(555) 555-5555" ref="input"/>
</div>
                            
<script>                   
  this.$refs.input.addEventLis tener('input', function () {
        // some code
 });
</script>

Answer 1

Dans le composant Vue 的根内部，在 Vue 2 和 Vue 3 中，this 是 未定义：

Vérifiez ici. . p>

---

Les

Vue Références de modèles ne sont accessibles que dans tout hook ou méthode qui se produit après l'installation du composant et avant sa désinstallation.

Cela signifie que le plus tôt auquel vous pouvez faire référence this.$refsthis.$refs est situé installé. Le dernier se trouve avantDémonter . Vous pouvez également y accéder dans tous les hooks ou méthodes qui se produisent entre ces deux moments.

---

Étant donné que vous essayez d'ajouter des écouteurs d'événements à HTMLInputElement, je vous recommande d'utiliser la directive v-on, qui ajoutera automatiquement des écouteurs d'événements au montage et les supprimera au démontage.

Dans votre cas :

                            
sssccc

---

D'ailleurs, sachez que thisce d'une fonction régulière n'a pas accès au contexte du composant, sauf s'il s'agit d'une fonction fléchée :

export default {
  mounted() {
    this.$refs.input.addEventListener('input', function() {
      /*
       * Here `this` is the context of the current function, you can't 
       * access methods, computed, data or props of the component.
       * You'd need to make it an arrow function to access the component scope
       */
    })
  }
}

Et dans n'importe quelle méthode (par exemple : myFn），thismyFn ci-dessus),

this est le contexte du composant, qui peut accéder à tous les membres du composant. 🎜