Vue.js で 親コンポーネントと同じ高さに設定する方法を考えた

背景

Vue.js で親コンポーネントと同じ高さにする。

具体的には、height:auto（コンテンツの内容に応じて、heightが変わる。）のコンポーネントに対して、
ある特定条件を満たしている場合、透明色の色をかぶせる。と言うことが必要となりました。

height: 100% でも指定しておけば、うまくいくだろう。と思って試してみましたが、
height:100% が適用されるのは、親コンポーネントのheightが指定されている場合のみらしく、今回適用したい height:auto ` の場合には、適用できないとのこと。異なる方法で対応を検討する必要が生じました。

結論

結論として、以下の方法で対応しました。

template

<template>
  <div>
    <div :style="{height:fullHeight}" /> // 高さを指定する。
 </div>
</template>

script(typescript)

import {Vue, Component, Prop} from 'vue-property-decorator';

@Component({})
export default class Sample extends Vue {
  fullHeight:string;

  mounted() {
    this.fullHeight = this.$el.clientHeight + 'px'; // DOMから高さを取得する。
  }
}

説明

概要

Vue.js のAPIでElementを取得して、高さを取得しています。
シンプルですが、この方法を取ることで、Elementが持つ他のプロパティを取得することも可能です。

Vue.js API

• https://jp.vuejs.org/v2/api/index.html#el
  Element のプロパティ
• https://developer.mozilla.org/ja/docs/Web/API/Element

注意事項

mounted で取得する

created や computed を使用すると、 Element(DOM) を生成する前に、Element要素にアクセスすることになるので、エラーを吐いてしまいます。

詳細は、以下サイトにて

• https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0

時間があれば、調べた経緯とかも整理して、編集したいと思います。