VueJs - Comment accéder à la propriété DOM d'un élément depuis $refs

Question

J'ai un élément

dans mon modèle. J'ai besoin d'accéder/modifier la propriété DOM comme scrollTop, verticalOffset de l'élément . Comment puis-je y parvenir ?

J'ai essayé d'y accéder en utilisant this.$refs[userIndex][0].$el mais cela ne fonctionne pas. Je peux voir toutes les propriétés dans la console mais je ne peux pas y accéder. Cependant this.$refs.tbody.scrollTop fonctionne.

Voici la capture d'écran montrant console.log(this.$refs)

console.log(this.$refs[userIndex])

console.log(this.$refs[userIndex][0])

Comme vous pouvez le voir, lorsque j'utilise this.$refs[userIndex][0], je ne vois pas les propriétés DOM

Answer 1

Un objet $ref aura seulement une propriété $el s'il s'agit d'un composant Vue. Si vous ajoutez un attribut ref à un élément régulier, le $ref sera une référence à cet élément du DOM.

Il suffit de faire référence à this.$refs[userIndex][0] au lieu de this.$refs[userIndex][0].$el.

Pour voir les propriétés de cet élément dans la console, vous devrez utiliser console.dir au lieu de console.log. Voir ce post.

Cependant, vous pouvez accéder aux propriétés de l'élément comme vous le feriez avec n'importe quel autre objet. Ainsi, vous pourriez par exemple afficher le scrollTop via console.log(this.$refs[userIndex][0].scrollTop).

Answer 2

Je ne pense pas que verticalOffset existe. offsetTop existe. Pour afficher dans la console un élément Dom et sa propriété, utilise console.dir

Ouvrez la console du navigateur et exécutez ce snippet fonctionnel:

var app = new Vue({
  el: '#app',
  data: {
    users: {
      first: {
        name: "Louise"
      },
      second: {
        name: "Michelle"
      }
    }
  },
  mounted() {
    console.dir(this.$refs[1][0])
    console.log('property: ', this.$refs[1][0].offsetTop)
  }
})

  {{userData}}: {{userIndex}}