web-dev-qa-db-ja.com

Vuejsで要素の高さを取得する

Divの高さを取得して、それに一致する別のdivの高さを取得したい。メソッドclientHeightを使用しましたが、良い値（より小さい値）は返されません。実際、すべての要素が充電される前に高さを返すようです。オンラインで調査した後、window.load（）を入れて、すべてが充電されるまで遅延させようとしましたが、うまくいきません。いくつかのアイデア？

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
13
Juliane Blier

あなたのやり方は素晴らしいです。しかし、ref属性を介した別のvue特定の方法があります。

 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>

この場合、値を取得しているだけなので、元のgetElementByIdアプローチを使用するか、vue固有のrefアプローチを使用するかは問題ではありません。ただし、要素に値を設定していた場合は、vueが値が変更され、元の値で値を上書きしないことを理解するように、refアプローチを使用することをお勧めしますDOMでそのノードを更新する必要がある場合。

詳細については、こちらをご覧ください： https://vuejs.org/v2/api/#vm-refs

更新

数人の人々は、上記の解決策が彼らのために機能しなかったというコメントを残していました。そのソリューションは概念を提供しましたが、例として完全に機能するコードではありませんでしたので、概念を示す以下のコードで答えを増やしました。

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>

ブラウザの結果のスクリーンショットは次のとおりです。

enter image description here

29
Ron C

flexboxを使用して、同じ高さの列を実現します 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>
2
drimbo