Cách thêm chú giải công cụ khởi động trong Vue Js

Question

Tôi có một trang để liệt kê dữ liệu từ bảng sử dụng VueJs và Laravel. Dữ liệu danh sách thành công. Xóa và chỉnh sửa chức năng đang diễn ra. Vì mục đích đó tôi đã thêm hai số <span> (glyphicon-pencil), <span> (glyphicon-trash). Nếu cả hai <span> đều nằm ngoài các chú giải công cụ <template>, nếu không nó sẽ không hoạt động. Bạn có biết cách tooltip bootstrap hoạt động bên trong Vue Js hay không. Cảm ơn.

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

Answer 1

Bạn cần phải chạy $('[data-toggle="tooltip"]').tooltip() SAU tải dữ liệu từ máy chủ. Để đảm bảo DOM được cập nhật, bạn có thể sử dụng nextTick chức năng:

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

Answer 2

Bạn có thể sử dụng chỉ thị này:

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

Ví dụ:

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

Hoặc bạn cũng có thể liên kết văn bản chú giải công cụ với biến được tính toán:

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

Và trong kịch bản thành phần của bạn:

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

Answer 3

Bootstrap Vue hỗ trợ tooltips trực tiếp thông qua cú pháp sau ghi nhận here.

<b-tooltip content="Tooltip Text"> 
    <b-btn variant="outline-success">Live chat</b-btn> 
</b-tooltip> 

Lắp đặt Bootstrap Vue nhanh chóng và không đau. Xem the quick setup guide để biết thêm chi tiết.