How to create multiple Vue components inside of Bootstrap tabs?

Question

I am using the togglable tabs component in Bootstrap. I would like a table in each tab. Each one is displaying a table of email logs (Click Event, Open Event, etc). I would also like each table to be loaded dynamically with Vue-resource only once the user clicks on that tab, and for the resource/component to only be loaded once (once we have the data from AJAX, don't refresh it).

How can I set this up? I currently have an email-table component and an email-table-template template that renders the table, but I'm not sure how to set those up to render themselves when the user clicks the tab, and to only call the AJAX once.

An illustration of the task

Here is my current code for detecting the tab switch and newing up a Vue component:

$('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
    }
  })
});

Any insight is appreciated. Thanks very much!

Can you create a jsfiddle of what you have tried and where you are getting error. — Saurabh
– Saurabh, Commented Nov 22, 2016 at 6:21
Though what you want to achieve is clearly shown in the gif, I feel your question may be too abroad. I'd like to suggest you spend a few hours to go through the official guide and come back with any specific problem you feel hard to solve. — JJPandari
– JJPandari, Commented Nov 22, 2016 at 7:48

tony19 · Accepted Answer · 2022-07-15 01:56:30Z

1

If you want to call a method only once you can use listen and emit events.

vm.$once and vm.$emit should do the trick.

Official documentation https://v2.vuejs.org/v2/api/#vm-once

Here is a quick example https://jsfiddle.net/leocoder/s1nfsao7/4/

edited Jul 15, 2022 at 1:56

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 23, 2016 at 18:19

leocoder

1961 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amclelland Over a year ago

This is what I was looking for, and it also pointed out to me what I need to change fundamentally; I needed to create Vue wrappers for my Bootstrap tabs. So instead of using jQuery and listening for those click normally, I made a Vue wrapper around the tab and used the Vue v-on:click directive, and tied that to a call to the AJAX. Your example was super helpful in pointing me in the right direction, thanks very much!

tony19 · Accepted Answer · 2022-07-15 04:34:45Z

0

From official documentation

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

Sample:

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

In the above example "currentView" is to be set to a component name you want to load/display

Docs: https://v2.vuejs.org/v2/api/#keep-alive

edited Jul 15, 2022 at 4:34

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 22, 2016 at 6:22

Duy Anh

7801 gold badge7 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to create multiple Vue components inside of Bootstrap tabs?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related