web-dev-qa-db-fra.com

VueJs - Comment accéder à la propriété DOM

J'ai un élément

<tbody ref="tbody">
  <tr class="row" :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">

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

J'ai essayé d'accéder à l'aide de 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.

Ci-dessous, la capture montrant console.log(this.$refs) enter image description here

console.log(this.$refs[userIndex]) enter image description here

console.log(this.$refs[userIndex][0]) enter image description here

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

domvue.jsvuejs2
4
nbbk

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

Il suffit de référencer 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 devez 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 à n'importe quel autre objet. Ainsi, vous pouvez consigner la scrollTop, par exemple, via console.log(this.$refs[userIndex][0].scrollTop).

2
thanksd

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

Ouvrez la console du navigateur et lancez cet extrait de travail:

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)
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<table><tbody ref="tbody">
  <tr :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">
  <td>{{userData}}: {{userIndex}}</td>
  </tr>
</tbody>
</table>
</div>

1
François Romain