javascript - Hent elementhøyde med Vuejs

Jeg vil få høyden til en div for å gjøre høyden til en annen div lik den. Jeg brukte metoden clientHeight, men den gir meg ikke riktig verdi (lavere verdi). Faktisk ser det ut til at den gir en høyde før alle elementene er lastet. Etter litt research på nettet prøvde jeg å bruke window.load() for å vente til alt er lastet, men det fungerer heller ikke. Noen ideer?

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>

Svar #1

Måten du gjør det på er fin. Men det finnes en annen Vue-spesifikk måte via et ref-attributt.

 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>

I dette tilfellet, siden du bare får ut verdi, spiller det egentlig ingen rolle om du bruker din opprinnelige getElementById-tilnærming eller den vue-spesifikke referansemetoden. Men hvis du setter verdien på elementet, er det mye bedre å bruke ref-tilnærmingen slik at Vue forstår at verdien har endret seg og ikke overskriver verdien med den opprinnelige verdien hvis den må oppdatere den noden i DOM-en.

Du kan lære mer her: https://v2.vuejs.org/v2/api/#vm-refs

Oppdatering

Noen få personer hadde lagt igjen kommentarer om at løsningen ovenfor ikke fungerte for dem. Den løsningen ga konseptene, men ikke fullstendig fungerende kode som eksempel, så jeg har utvidet svaret mitt med koden nedenfor som demonstrerer konseptene.

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 /dist/vue.min.js"></script>

Her er et skjermbilde av resultatene i nettleseren:

Merk:
Svaret mitt forutsetter at du laster vue.js fra en CDN eller lokalt inn i nettleseren og kjører det der. Hvis du i stedet kjører koden din via kommandolinjegrensesnittet og svaret mitt ikke fungerer for deg, vennligst se på @mayank1513 sitt svar i stedet.

Svar #2

Tok mye tid ⌚ å løse problemet. I utgangspunktet prøvde jeg å følge svaret til Ron C. Å prøve å få this.$refs.infoBox.clientHeight; fungerte rett og slett ikke - det ga undefined.

Deretter utforsket jeg this.$refs.infoBox-objektet.

Wow!!! Jeg vet ikke hvordan koden han skrev fungerer for ham og alle andre, men det var ingen egenskap som het clientHeight. Fikk det endelig inn i $el.

så vi må erstatte this.$refs.infoBox.clientHeight; med this.$refs.infoBox.$el.clientHeight;

Dette fungerte bare bra for meg.

Oppdatering

Mens jeg brukte nuxt fungerte ikke this.$refs.infoBox.$el.clientHeight. men Ron Cs svar fungerer for dette tilfellet. this.$refs.infoBox.$el.clientHeight; Det ser ut til å fungere når jeg bruker @vue/CLI

Relaterte artikler