基礎からメモ： Vue.js CH4-p143 更新後のDOMにアクセスする

仮想DOMによるデータの更新は非同期に行われるため、更新後のDOMを操作するためにはDOMの更新を待ち受ける仕組みであるnextTickを使用する。

グローバルメソッドVue.nextTickまたは、インスタンスメソッドthis.$nextTickにコールバック関数を定義して使用する。

this.$nextTick(function() {
    // コールバック関数でDOM更新後に行いたい処理
})

更新後のDOMの高さを取得

<div id="app">
<!-- nextTickで更新後のDOMにアクセスする -->
  <button v-on:click="list.push(list.length+1)">追加</button>
  <!-- ref="名前"で$refsから取得する要素に指定 -->
  <ul ref="list">
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    list: []
  },
  watch: {
    list: function() {
      // 更新後の要素の高さを取得できない
      console.log('通常: ', this.$refs.list.offsetHeight);
      // nextTickを使えばできる
      this.$nextTick(function() {
        console.log('nextTick: ', this.$refs.list.offsetHeight);
      })
    }
  }
})

表示結果：

通常のは更新後の高さを取得できていないので「０」から始まるが、nextTickを使った方は一回のクリックで追加された要素を含む高さを取得できている。

通常:  0
nextTick:  16
通常:  16
nextTick:  32
通常:  32
nextTick:  48
通常:  48
nextTick:  64
....

nextTickは画像やウェブフォントのロードは待たないので、DOM内にそれらを含む場合は画像等のロードを待つコールバック関数内で使う必要がある。