VueでCSSを読み込み後に処理を行いたい

auです。

Vue Split Panesを使って、ブロックごとに分けて処理を行いたいと考えています。

その際に、sizeというオプションを設定して初期範囲を設定します。

こんな感じ

  <splitpanes
    style="height: 100vh;"
    class="default-theme"
    horizontal
    @resize="log('resize', $event)"
    @load="load">
  <pane size=70 id="test">
    <span><component1 ref="comp1"></component1></span>
  </pane>
  <pane>
    <span>2</span>
  </pane>
</splitpanes>

component1には、iframeが実装されています。

読み込み時と範囲を変えた際にiframeの範囲を設定しています。

export default {
  methods: {
  log (str, e) {
      const nodes = document.getElementById('test')
      const height = window.getComputedStyle(nodes).height
      const width = window.getComputedStyle(nodes).width
      this.$refs.component1.iframeResize(height, width)
    }
  },
  mounted () {
    const nodes = document.getElementById('test')
    const height = window.getComputedStyle(nodes).height
    const width = window.getComputedStyle(nodes).width
    console.log(height, width)
    this.$refs.component1.iframeResize(height, width)
}

水色の部分がiframeの実装範囲です。

問題点

処理順序が「iframeの範囲処理 -> sizeの変更」となっており、最大サイズにならない。

思い浮かぶ解決案

範囲を変更するとそれに応じてiframeの範囲が変わるため、初期化の処理手順さえ変えれば解決しそう。

まだ解決してないから色々試してみよう。