Question

我有一个Bootstrap popover，我想附加到一个具有条件渲染的元素;因此，我必须在元素附加到DOM之后触发$（）。popover（）。

是否有办法在之后触发回调 v-if语句将元素插入DOM？

Answer 1

在vuejs 2中使用它：

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

看看here

Answer 2

Vue.nextTick（）推迟在下次更新DOM后执行的回调，请参阅：VueJS API reference

Answer 3

正确的方法是将它作为一个指令，这样你就可以挂钩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>

Vuejs：渲染后的回调

3 个答案: