web-dev-qa-db-fra.com

Obtenir une référence à un élément de la méthode dans Vue.js

Comment puis-je obtenir une référence à l'élément qui a déclenché la méthode dans Vue.js? J'ai HTML comme ceci:

 <input type="text" v-model="dataField" v-bind:class="dataFieldClass" />

Et dans mon viewmodel Vue.js, j'ai une méthode:

dataFieldClass: function () {
    // Here I need the element and get its ID
    // Pseudo code
    var elementId = $element.id;
}

Je sais qu'il est possible d'obtenir l'élément de event (v-on: click), mais ce n'est pas un événement, c'est une méthode simple renvoyant une classe CSS pour l'élément en fonction de quelques conditions du modèle de vue. Il devrait également être calculable, mais le problème est le même.

vue.js
7
Ondrej Vencovsky

Peut-être que vous pourriez utiliser ref?

<input type="text" v-model="dataField" v-bind:class="dataFieldClass" ref="el" />

Et utilisez-le comme ceci:

dataFieldClass: function () {
    var elementId = this.$refs.el;
}

Voir la documentation ici: https://vuejs.org/v2/api/#ref

5
Daniel Diekmeier

Qu'en est-il d'utiliser le motif ref . Mettez ref="someName" dans votre élément DOM et accédez-y dans votre méthode avec this.$refs["someName"] (vous pouvez passer 'someName' en tant que paramètre à votre méthode).

Notez que ce n'est pas un très bon modèle sauf si, pour une raison quelconque, vous avez vraiment besoin de l'élément DOM. Sinon, transmettez simplement un paramètre pertinent à votre méthode.

Ce n'est pas une bonne méthode principalement parce qu'elle présente un inconvénient majeur: il n'y a pas de $ refs la première fois que la vue est rendue (car l'élément n'est pas encore présent). Donc, vous devriez forcer la vue à rendre deux fois.

Si vous avez plusieurs éléments dans une boucle v-for, ceci. $ Refs ["someName"] devient un tableau. Vous pouvez le faire fonctionner avec quelques adaptations, voici un exemple:

new Vue({
  el: '#app',
  data() {
    return {
      fields: [{
          name: 'field1',
          value: 'value1'
        },
        {
          name: 'field2',
          value: 'value2'
        }
      ]
    };
  },
  methods: {
    dataFieldClass(index) {
      if (!this.$refs.fields) {
        // First render, the element is not there yet
        return '';
      } else {
        // Here is the element
        console.log(this.$refs.fields[index]);
      }
    }
  },
  mounted() {
    // Force the instance to render a second time
    this.$forceUpdate();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<div id="app">
  <label v-for="(field, index) in fields">
    {{ field.name }}:
    <input ref="fields" :value="field.value" v-bind:class="dataFieldClass(index)">
  </label>
</div>

1
Cobaltway

Vous pouvez obtenir la référence à partir d'un objet d'événement DOM. "event.currentTarget" est la propriété qui fait référence à l'élément auquel l'écouteur d'événements (méthode vuejs) a été affecté.

Il s'agit d'une spécification DOM standard, mais vous pouvez également utiliser cette propriété dans Vuejs.

dataFieldClass: function (event) {
    var elementId = event.currentTarget.id;
}
0
Heesoo Lee