やりたいこと

とある画面が描写されるとき、高さが異なるDiv要素DivAおよびDivBの高さを揃えて表示したい。

ベースHTML

vuejs
1<template>
2  <section>
3    <div name="DivA" ref="divA">
4      <!-- 色んなコンテンツ：高さ150px程度 -->
5    </div>
6    <div name="DivB" ref="divB">
7      <!-- 色んなコンテンツ：高さ210px程度 -->
8    </div>
9  </section>
10</template>

試したこと

:styleバインドを使った動的設定その１：

タグに<div name="DivA" :style="searchSectionHeight">
watchイベントのとある部分にthis.searchSectionHeight = '{ height: ' + Math.max(divAHeight,divBHeight) + 'px; }';
→設定されず

:styleバインドを使った動的設定その２：

タグに<div name="DivA" :style="{height:searchSectionHeight+'px'}">
data()にsearchSectionHeight:0
watchイベントのとある部分にthis.searchSectionHeight = Math.max(divAHeight,divBHeight)
→初期値が0なので高さが取れず、結果的にどちらも表示されなくなる

$refで取り出したDOM要素に直接セットとか？その１

this.$refs.divA.clientHeight = this.$refs.divB.clientHeight;
→ReadOnlyプロパティと怒られる

$refで取り出したDOM要素に直接セットとか？その２

this.$set(this.$refs.divA,'style','{ height: ' + Math.max(divAHeight,divBHeight) + 'px; }');
→設定されず

上記以外にも細かく色々試しましたが結局ダメで力尽きました…

ほか

jQueryをなるべく廃して実現するのを目標にやってますが、最悪どうしてもできなければjQueryブチ込むこともやぶさかではありません…

有識者の方、お助けください！！

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと強引かもしれませんがこのような感じで希望されている状態になりますでしょうか。

vue
1<template>
2  <section>
3    <div name="DivA" ref="divA" class="wrap" :style="{height: higherHeightPx}">
4      <div class="height30"></div>
5      <div class="height30"></div>
6      <div class="height30"></div>
7      <div class="height30"></div>
8      <div class="height30"></div>
9    </div>
10    <div name="DivB" ref="divB" class="wrap" :style="{height: higherHeightPx}">
11      <div class="height50"></div>
12      <div class="height50"></div>
13      <div class="height50"></div>
14      <div class="height50"></div>
15      <div class="height50"></div>
16    </div>
17  </section>
18</template>
19
20<script>
21  export default {
22    data () {
23      return {
24        heightA: 0,
25        heightB: 0,
26        isMounted: false,
27      }
28    },
29    computed: {
30      higherHeightPx () {
31        return this.isMounted ? Math.max(this.heightA, this.heightB) + 'px' : null
32      }
33    },
34    mounted () {
35      this.heightA = this.$refs.divA.clientHeight
36      this.heightB = this.$refs.divB.clientHeight
37      this.isMounted = true
38    }
39  }
40</script>
41<style lang="scss" scoped>
42  .wrap {
43    padding: 10px;
44    background-color: grey;
45  }
46
47  .height30 {
48    height: 30px;
49    background: blue;
50  }
51
52  .height50 {
53    height: 50px;
54    background: red;
55  }
56</style>