如何在 Bootstrap 选项卡中创建多个 Vue 组件？

Question

我在 Bootstrap 中使用togglable tabs 组件。我想在每个选项卡中都有一个表格。每个都显示一个电子邮件日志表（单击事件、打开事件等）。我还希望每个表仅在用户单击该选项卡后才使用 Vue 资源动态加载，并且资源/组件仅加载一次（一旦我们从 AJAX 获得数据，就不要刷新它）。

我该如何设置？我目前有一个 email-table 组件和一个 email-table-template 模板来呈现表格，但我不确定如何设置它们以在用户单击选项卡时呈现自己，并且只调用 AJAX 一次。

An illustration of the task

这是我当前用于检测选项卡开关和更新 Vue 组件的代码：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var email_event = $(e.target).data('email-event');
switch(email_event) {
  case 'click':
    createClick();
    break;
  // rest of the cases
}

function createClick() {
var click_events = Vue.resource('/api/email_logs/click_events');

click_events.get().then((response) => {
  new Vue({
    el: '#table-click',
    data: {
      searchQuery: '',
      gridColumns: ['campaign_id', 'target_link_name', 'target_link_url', 'created_at'],
      gridData: response.body
    }
  })
});

感谢任何见解。非常感谢！

Answer 1

来自官方文档

如果您想将切换出的组件保留在内存中，以便保留它们的状态或避免重新渲染，您可以将动态组件包装在 <keep-alive> 元素中

示例：

<keep-alive> <component :is="currentView"> <!-- inactive components will be cached! --> </component> </keep-alive>

在上面的例子中，“currentView”被设置为你想要加载/显示的组件名称

文档：https://vuejs.org/v2/api/#keep-alive

Answer 2

如果您只想调用一次方法，则可以使用监听和发出事件。

vm.$once 和 vm.$emit 应该可以解决问题。

官方文档 https://vuejs.org/v2/api/#vm-once

这是一个简单的例子 https://jsfiddle.net/leocoder/s1nfsao7/4/