如何在 Vue.js 中添加引导工具提示

Question

我有一个使用 Vue.js 和 Laravel 从表中列出数据的页面。列出数据成功。删除和编辑功能正在进行中。为此，我添加了两个 <span> (glyphicon-pencil), <span> (glyphicon-trash) 。如果 <span> 都在 <template> 工具提示显示之外，否则它不起作用。你知道引导工具提示在 Vue Js 中是如何工作的吗？谢谢。

page.blade.php

     <template id="tasks-template">
       <table class="table table-responsive table-bordered table-hover">
            <thead>
                   <tr>
                   <th>#</th>
                   <th>Id</th>
                   <th>Religion</th>
                   <th>Action</th>
                   <th>Created</th>
                   <td>Status</td>
               </tr>
           </thead>

      <tbody>
             <tr v-for="(index, task) in list">
             <td><input type="checkbox" id="checkbox" aria-label="checkbox" value="checkbox"></td>
             <td>@{{ index + 1 }}</td>
            <td>@{{ task.religion | capitalize }}</td>
           <td v-if="task.status == 'publish'">
                     <span class="glyphicon glyphicon-ok"></span>
           </td>
           <td v-else>
                     <span class="glyphicon glyphicon-remove"></span>
           </td>
           <td>@{{ task.created_at }}</td>
           <td>
               <span class="glyphicon glyphicon-pencil" aria-hidden="true" data-toggle="tooltip" data-placement="left" title="Edit"></span>
               <span class="glyphicon glyphicon-trash" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Delete"></span>
           </td>
         </tr>
       </tbody>
        </table>
        </template>

        <tasks></tasks>
@push('scripts')
    <script src="/js/script.js"></script>
@endpush

脚本.js

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

Vue.component('tasks', {

    template: '#tasks-template',

    data: function(){
        return{
            list: []
        };
    },

    created: function(){
        this.fetchTaskList();
    },

    methods: {
        fetchTaskList: function(){
            this.$http.get('/backend/religion/data', function(tasks){
                this.$set('list', tasks);
            });
        }
    }

});

new Vue({
   el: 'body'
});

原文由 Sarath TS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在从服务器加载数据后运行 $('[data-toggle="tooltip"]').tooltip() 。为确保更新 DOM，您可以使用 nextTick 函数：

 fetchTaskList: function(){
    this.$http.get('/backend/religion/data', function(tasks){
        this.$set('list', tasks);
        Vue.nextTick(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    });
}

https://vuejs.org/api/#Vue-nextTick

编辑：Vitim.us 在下面发布了一个更完整和更强大的解决方案

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用此指令：

 Vue.directive('tooltip', function(el, binding){
    $(el).tooltip({
             title: binding.value,
             placement: binding.arg,
             trigger: 'hover'
         })
})

例如：

 <span class="label label-default" v-tooltip:bottom="'Your tooltip text'">

或者您也可以将工具提示文本绑定到计算变量：

 <span class="label label-default" v-tooltip:bottom="tooltipText">

在您的组件脚本中：

 computed: {
    tooltipText: function() {
       // put your logic here to change the tooltip text
       return 'This is a computed tooltip'
    }
}

原文由 Ikbel 发布，翻译遵循 CC BY-SA 3.0 许可协议