web-dev-qa-db-fra.com

Obtenez la hauteur d'élément avec Vuejs

Je veux obtenir la hauteur d'une div afin de faire correspondre la hauteur d'une autre div. J'ai utilisé la méthode clientHeight, mais elle ne me renvoie pas la bonne valeur (valeur inférieure). En fait, il semble revenir en hauteur avant que tous les éléments soient chargés ... Après des recherches en ligne, j'ai essayé de mettre un window.load () pour attendre que tout soit chargé, mais cela ne fonctionne pas aussi bien. Quelques idées ?

mounted () {
  this.matchHeight()
},
matchHeight () {
  let height = document.getElementById('info-box').clientHeight
}
<div class="columns">
  <div class="left-column" id="context">
  <p>Some text</p>
  </div>
  <div class="right-column" id="info-box">
    <img />
    <ul>
      some list
    </ul>
  </div>
</div>

javascripthtmlvue.jsvuejs2vue-component
7
Juliane Blier

La façon dont vous le faites est bien. Mais il existe un autre moyen spécifique à la vue via un attribut ref.

 mounted () {
   this.matchHeight()
 },
 matchHeight () {
   let height = this.$refs.infoBox.clientHeight;
 }



    <div class="columns">
        <div class="left-column" id="context">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"></>
            <img />
            <ul>
                some list
            </ul>
        </div>
    </div>

Dans ce cas, puisque vous obtenez juste la valeur, le fait que vous utilisiez votre approche getElementById originale ou l'approche spécifique à une vue ref importe peu. Cependant, si vous définissiez la valeur sur l'élément, il est bien préférable d'utiliser l'approche ref pour que vue comprenne que la valeur a changé et n'écrasera pas la valeur avec la valeur d'origine si elle doit mettre à jour ce nœud dans le DOM. .

Vous pouvez en apprendre plus ici: https://vuejs.org/v2/api/#vm-refs

Mettre à jour

Quelques personnes avaient laissé des commentaires selon lesquels la solution ci-dessus ne leur convenait pas. Cette solution fournissait les concepts mais pas le code de travail complet à titre d'exemple. J'ai donc augmenté ma réponse avec le code ci-dessous qui illustre les concepts. 

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            leftColStyles: { },
            lines: ['one', 'two','three']
        }
    },
    methods: {
        matchHeight() {
            var heightString = this.$refs.infoBox.clientHeight + 'px';
            Vue.set(this.leftColStyles, 'height', heightString); 
        }
    },
    mounted() {
        this.matchHeight();
    }

});
.columns{width:300px}
.left-column {float:left; width:200px; border:solid 1px black}
.right-column {float:right; border:solid 1px blue; }
<div id="app">
    <div class="columns">
        <div class="left-column" id="context" v-bind:style="leftColStyles">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"> 
            <img />
            <ul>
                <li v-for="line in lines" v-text="line"></li>
            </ul>
        </div>
    </div>

</div>

 <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

Voici une capture d'écran des résultats dans le navigateur:

 enter image description here

20
Ron C

J'utiliserais flexbox pour obtenir des colonnes de hauteur égale https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
   display: flex;
}
.column {
   border: 1px solid;
   padding: 20px;
   width: 150px;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="container">
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
            sit amet ornare fringilla, ligula quam faucibus urna
        </div>
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</body>
</html>

1
drimbo