VueでBootStrapのTooltipを操作しようとして手こずった

VueでToolTipを動的にいじろうとしてハマった.

試行錯誤の段階も文章化しているのでお急ぎの方は最後のまとめへどうぞ.

試行錯誤

Try1

とりあえず普通にやってみる

<div id="app">
    <button class="btn" data-toggle="tooltip" title="Tooltip">hoge</button>
    <button class="btn" data-toggle="tooltip" v-bind:title="date">fuga</button>
    <button class="btn btn-primary" @click="update">更新</button>
</div>


<!-- (includeとかは略) -->
<script>
    new Vue({
        el: '#app',
        data: {
            date: '',
        },
        methods: {
            update: function(){
                date=new Date().toString();
                $('[data-toggle="tooltip"]').tooltip();
            }
        }
    });
</script>

こういうソースを書いてブラウザで開きます.
結果は…

See the Pen maOXQm by Ibuki (@ibuki2003) on CodePen.

動的に操作する方は動作しません!!

検証と考察

ChromeのdevToolを見てみましょう.

あれ,titleの中身,どちらも無いですね…
前者には代わりにアトリビュートdata-original-titleにその中身が入っているようです.¹

Try2

ではdata-original-titleにデータをバインドしたらうまくいくんでしょうかね?

See the Pen Vue and Bootstrap Tooltip test 2 by Ibuki (@ibuki2003) on CodePen.

残念ながらこちらもだめでした.どうやらtitle要素をコピーして上書きされてしまったようです.

検証と考察

tooltip対応メソッドはDOM描画前に呼ばれているようなので
DOM描画後に呼ばれるようにするといいようです.

Try3

調べてみたところVueにはupdatedというものがあるようです.
公式によると

データが変更後、仮想 DOM が再描画そしてパッチを適用によって呼ばれます。
このフックが呼び出されるとき、コンポーネントの DOM は更新した状態になり、このフックで DOM に依存する操作を行うことができます。

さて,これを使ってみましょう.

See the Pen Vue and Bootstrap Tooltip test 3 by Ibuki (@ibuki2003) on CodePen.

今度こそうまく行ったみたいですね!

まとめ

$(...).tooltip()はupdatedにて呼ぶようにする.

1. ブラウザ標準のツールチップが表示されないように退避させているようです(推測です) ↩