<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); }); }, }, });