web-dev-qa-db-ja.com

Vuejs：レンダリング後のコールバック

Bootstrapポップオーバーがあり、条件付きレンダリングを持つ要素にアタッチしたいので、要素がDOMにアタッチされた後で$（）。popover（）をトリガーする必要があります。

コールバックをトリガーする方法はありますかafter v-ifステートメントが要素をDOMに挿入しますか？

vuejs2bootstrap-4bootstrap-popover
8
Neve12ende12

これをvuejs 2で使用します。

updated: function() {
    $('[data-toggle="tooltip"]').tooltip();
},

見てください ここ

14
Antonio Morales

これを行う正しい方法は、それをディレクティブにすることです。そのため、DOM要素のライフサイクルにフックできます。

nextTickを使用することは、いくつかの理由で適切な方法ではありません。DOMが反応してビューの一部を再レンダリングすると、壊れる可能性があります。初期化後にツールチップを破棄するわけではありません。 nextTickは非同期であり、renderとnextTickの間の何かがDOM状態を変更する可能性があるため、これは壊れる可能性があります。

https://vuejs.org/v2/guide/custom-directive.html

/* Enable Bootstrap popover using Vue directive */
Vue.directive('popover', {
    bind: bsPopover,
    update: bsPopover,
    unbind (el, binding) {
        $(el).popover('destroy');
    }
});
function bsPopover(el, binding) { 
    let trigger;
    if (binding.modifiers.focus || binding.modifiers.hover || binding.modifiers.click) {
        const t = [];
        if (binding.modifiers.focus) t.Push('focus');
        if (binding.modifiers.hover) t.Push('hover');
        if (binding.modifiers.click) t.Push('click');
        trigger = t.join(' ');
    }
    
    $(el).popover('destroy'); //update
    $(el).popover({
        title: typeof binding.value==='object'? binding.value.title : undefined,
        content: typeof binding.value==='object'? binding.value.content : binding.value,
        placement: binding.arg,
        trigger: trigger,
        html: binding.modifiers.html
    });
}


//DEMO
new Vue({
  el: '#app',
  data: {
    foo: "Hover me",
    bar: "There",
    baz: {content: "<b>Hi</b><br><i>There</i>", title: "Test"},
  }
});
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>


<div id="app">
  <h4>Bootstrap popover with Vue.js Directive</h4>
  <br>
  <input v-model="foo" v-popover.hover="foo"/>
  <button v-popover.click="bar">Click me</button>
  <button v-popover.html="baz">Html</button>
  <br>
  <button v-popover:top="foo">Top</button>
  <button v-popover:left="foo">Left</button>
  <button v-popover:right="foo">Right</button>
  <button v-popover:bottom="foo">Bottom</button>
  <button v-popover:auto="foo">Auto</button>
</div>
3
Vitim.us

Vue.nextTick（）は、DOMの次の更新後に実行されるコールバックの実行を延期します。以下を参照してください。 VueJS APIリファレンス

2
Dirk Rejahl