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

Question

我正在 Bootstrap 中使用 togglable tabs 组件。我想要每个选项卡中的 table。每个都显示 table 的电子邮件日志（点击事件、打开事件等）。我还希望每个 table 仅在用户单击该选项卡后才使用 Vue-resource 动态加载，并且 resource/component 仅加载一次（一旦我们从 AJAX, 不要刷新).

我该如何设置？我目前有一个 email-table 组件和一个呈现 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

来自官方文档

If you want to keep the switched-out components in memory so that you can preserve their state or avoid re-rendering, you can wrap a dynamic component in a <keep-alive> element

示例:

<keep-alive> <component :is="currentView">  </component> </keep-alive>

在上面的例子中"currentView"是要设置成你想要的组件名称load/display

文档：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/

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

How to create multiple Vue components inside of Bootstrap tabs?

javascript

vue.js

vue-resource

vue-component