Как создать несколько компонентов Vue внутри вкладок Bootstrap?

Question

Я использую компонент переключаемых вкладок в Bootstrap. Я хотел бы таблицу в каждой вкладке. Каждый из них отображает таблицу журналов электронной почты (нажмите "Событие", "Открыть событие" и т. Д.). Я также хотел бы, чтобы каждая таблица загружалась динамически с помощью Vue-ресурса только после того, как пользователь нажимает на эту вкладку, и чтобы ресурс / компонент загружался только один раз (как только мы получим данные из AJAX, не обновляйте их).

Как я могу настроить это? У меня сейчас есть email-table компонент и email-table-template шаблон, который отображает таблицу, но я не уверен, как настроить их так, чтобы они отображались самостоятельно, когда пользователь нажимает на вкладку, и вызывали AJAX только один раз.

Иллюстрация к заданию

Вот мой текущий код для обнаружения переключения вкладок и обновления компонента 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

Если вы хотите вызвать метод только один раз, вы можете использовать события listen и emit.

vm.$once а также vm.$emit должен сделать свое дело.

Официальная документация https://vuejs.org/v2/api/

Вот быстрый пример https://jsfiddle.net/leocoder/s1nfsao7/4/

Answer 2

Из официальной документации

Если вы хотите сохранить отключенные компоненты в памяти, чтобы сохранить их состояние или избежать повторного рендеринга, вы можете обернуть динамический компонент в <keep-alive> элемент

Образец:

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

В приведенном выше примере "currentView" должен быть установлен на имя компонента, который вы хотите загрузить / отобразить

Документы: https://vuejs.org/v2/api/.