用vue 的v-if 或 v-show bootstrap的popover弹出框事件失效

<button class="btn btn-primary btn-sm" v-show="project.isCanImplement"  disabled="disabled" type="button" > <#--@click="noNeed()"-->
    <span aria-hidden="true"
          data-toggle="noNeed"
          data-placement="left"
          data-html="true"
          data-trigger="hover"
          data-container="body"
          data-content="<p style='font-weight:100;color:black;'>根据2020年政策变动情况，取消无需实施功能。</p>" >
        <i    class="fa fa-check-circle-o  ">无需实施申请</i>
    </span>

</button>

$(function () {
 //这样经过 v-show 这个事件不会起作用
    $('[data-toggle="noNeed"]').popover();
 
})

解决方法在vue数据渲染完后 执行popover

let projectHeaderVue = new Vue({
    el: '#projectInfoDiv',
 
    methods: {
        loadProject: function () {
            let vue = this;

            $.ajax({
                url: '/proj/task-project/get',
                type: 'post',
                data: {
                    id: window["project-id"]
                },
                dataType: 'json'
            }).done(function (res) {
                if (res != null) {
                   //通过vue提供的 $nextTick方法在dom结构加载完后执行
                    vue.$nextTick(function(){
                        $('[data-toggle="noNeed"]').popover();
                    })
 
                } else {
                    toastr.error("没有该项目！");
                }
            }).fail(function ($xhr) {
                toastr.error($xhr.responseJSON.message);
            });
        },
 
        },
 
    
});

标签：function,vue,show,bootstrap,toggle,popover,data
来源： https://blog.csdn.net/weixin_40607363/article/details/104670031