如何在 Vue.js 中添加引导工具提示 [英] How can add bootstrap tooltip inside Vue.js
问题描述
我有一个页面，用于使用 Vue.js 和 Laravel 列出表中的数据.列出数据成功.删除和编辑功能正在进行中.为此，我添加了两个 ;(glyphicon-pencil), <span>(字形垃圾).如果 都在 工具提示显示之外，否则它不起作用.你知道引导工具提示在 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屋！
