Vuejs: 렌더링 후 콜백

Vuejs: 렌더링 후 콜백

조건부 렌더가 있는 요소에 부가하는 부트스트랩 팝오버가 있기 때문에 요소가 DOM에 부가된 후 $(.popover)를 트리거해야 합니다.

v-if 문이 요소를 DOM에 삽입한 후 콜백을 트리거하는 방법이 있습니까?

vuej 2에서 사용:

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

여기 좀 봐.

Vue.nextTick()은 다음 DOM 업데이트 후 실행되는 콜백 실행을 지연합니다.다음 VueJS API 참조를 참조하십시오.

올바른 방법은 DOM 요소의 라이프 사이클에 접속할 수 있도록 지시하는 것입니다.

nextTick을 사용하는 것은 몇 가지 이유로 올바른 방법이 아닙니다.DOM이 반응하여 뷰의 일부를 다시 렌더링하면 문제가 발생할 수 있습니다.초기화 후 툴팁을 파괴하지 않습니다.이는 nextTick이 비동기이며 렌더와 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/bootstrap@3.3.7/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/bootstrap@3.3.7/dist/js/bootstrap.js"></script>
<script src="https://unpkg.com/vue@2.5.16/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>

언급URL : https://stackoverflow.com/questions/42236828/vuejs-callback-after-render