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

Question

我正在使用togglable tabs Bootstrap 中的组件。我想要每个选项卡中都有一个表格。每个都显示一个电子邮件日志表(点击事件、打开事件等)。我还希望每个表仅在用户单击该选项卡时才使用 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

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

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

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

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