如何在Vue.js中添加引导工具提示 [英] How can add bootstrap tooltip inside Vue.js

问题描述

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

I have a page for listing data from table using Vue.js and Laravel. Listing data is successful. Delete and edit function is going on. For that purpose I have added two <span> (glyphicon-pencil), <span> (glyphicon-trash). If both <span> are outside the <template>tooltip shows, otherwise it doesn't works. Do you know how bootstrap tooltip works inside Vue Js. Thanks.

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 

scripts.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'
});

推荐答案

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

You need to run $('[data-toggle="tooltip"]').tooltip() AFTER the data loads from the server. To ensure the DOM is updated, you can use the nextTick function:

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在下面发布了更完整，更强大的解决方案

a more complete and robust solution has been posted by Vitim.us below

这篇关于如何在Vue.js中添加引导工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！