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!
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/
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"> <!-- inactive components will be cached! --> </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
Related
I am using Angular elements to use my components inside of custom ThingsBoard widgets. The elements are created inside ngDoBootstrap() like this:
const newCustomElement = createCustomElement(CustomElementComponent, {
injector: this.injector,
});
customElements.define("new-custom-element", newCustomElement);
In a ThingsBoard widget I can then import the compiled JavaScript code of my elements via the "Ressources" tab and instantiate them in the onInit() function of the widget like this:
self.onInit = function() {
element = document.createElement(
"new-custom-element");
self.ctx.$container.append(element);
}
While this works just fine and enables me to use Angular components in my widgets, I noticed a strange problem which sometimes occurs when navigating from a ThingsBoard dashboard state back to another dashboard state. Sometimes after navigating back, my widget would seem to load just fine but then the entire change detection seems to be broken. As long as I do not manually call detectChanges() in my component, the component will sometimes appear to freeze entirely in the UI and no longer react to any user interaction (such as a click event). Only refreshing the page will fix this problem.
What could cause this problem and is there anything I can do in order to fix this?
Have you ever tried like this:
ngAfterViewChecked() {
this.cd.detectChanges();
}
or
constructor(private appRef: ApplicationRef) { }
ngAfterViewInit() {
this.appRef.bootstrap(CustomElementComponent);
}
Good luck.
I can't find how to get access to a component instance loaded from Vue Route, and persisted by means of <keep-alive> and <component>, so that I can programmatically unmount it.
I'm implementing a dynamic tab system so that each tab renders a URL, which in turn displays its declared component. I don't want to unmount a component everytime I load a new route whenever I create a new tab, or select another tab. I achieved it by combining with keep-alive/component in a custom component called MultiTabs:
<multi-tabs>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</multi-tabs>
So far so good. Let's say I've got these routes:
//...
{
path: '/foo',
name: 'Foo',
component: () => import("./components/pages/Foo.vue"),
},
{
path: '/bar',
name: 'Bar',
component: () => import("./components/pages/Bar.vue"),
},
//...
router.beforeEach((to, from, next) => {
store.dispatch('addTab', to); // --> Vuex would then add this route to a list of tabs (routes), which I will retrieve from the MultiTabs component.
next();
});
From my MultiTabs component, I get all the tabs (queried routes), and display them, as the tabs navigation, and the component that should be rendered:
MultiTabs.vue:
<template>
<!-- ... -->
<!-- MultiTab has a close button which emits the tabClosed event -->
<multi-tab
v-for="route of storedTabs"
:key="route.fullPath"
:route="route"
#selectedRoute="selectRoute"
#tabClosed="closeTab"
>
</multi-tab>
<!-- ... -->
<!-- This is where the component for the selected route is rendered -->
<div class="tab-pane">
<slot/>
</div>
</template>
So, when the user clicks on the close button in a tab, I want to free the corresponding component from memory. Note that this won't happen navigating through tabs because I used keep-alive and want this behaviour, so that the component is not mounted again and it performs the async calls to the server again.
Unfortunately for you such functionality does not exist yet. There are few issues in Vue repo including this one where you can find a hacky sample how to do that but it uses some internal details so using it might be risky as those details can change anytime...
Here is a ongoing discussion/RFC so if you need this, feel free to engage in the discussion or vote
Until the mentioned functionality is implemented, your best option is probably to refactor your components and do what you need to do not only in created/mounted hooks but also in activated hook which is called when kept-alive component is activated
I am trying to make in Vue.js CLI table with pagination and pages I have API backend and everything.
Now I have URL with "?page=1" and I want when I click on browser back button my table and pagination render on the same page what is URL. Right now on browser back button only URL change but the content stays the same.
But I hear there is a global fix with Vue router for that does anyone know how to do that?
I'm not sure if this is what you are talking about, but in this vue school video they talk about the Vue Router not always picking up on changes if the same component is being used. You can handle it by adding a key to the router-view with value $route.path. Then any change to the path will trigger a reload of the component.
You could put a watcher on the route:
computed : {
page () {
return this.$route.params.page
}
},
watch : {
page (val) {
updateContent(val)
}
},
mounted () {
updateContent(this.page)
}
In my routes I have set-up a slug for a particular route like so:
Main route: /members
Sub route: /members/:slug
Now when I go to www.website.com/members/some-slug
I will try to detect whether there's a slug or not with:
if (this.props.match.params.slug) {
// If have slug, open a modal window with data that corresponds to that slug
this.showModal(this.props.match.params.slug);
}
What's happening is that showModal will change the state of a Modal component to true (thus reveal it) and also trigger an API call to get the details pertaining to the slug parameter that's passed (e.g. the slug sarah-smith is used for a GET request as a param to get Sarah Smith's details).
So all of these are fine so far. However, the issue is the re-rendering of the page when I either:
Open the modal
Close the modal
We have transitions for each element on the page so if you visit a route, the elements will have a subtle fade-in transition.
When a modal is clicked what I do is (member.name being the slug):
<Link
to={`/member/${member.name}`}
</Link>
Which causes a re-routing hence you can see those small transitions in the background while the modal is fading into view (as if I am opening /member/slug for the first time).
Same with the modal close button, if I click on it, what I do is invoke:
closeModal() {
this.props.history.push("/member");
}
Which re-renders the entire page /member page and not just close the modal. I can't just use this.setState({ showModal: false }); since that wouldn't change the route back to /member.
Is there a way to resolve this? Or another way of doing it so that the page doesn't re-render while changing the URL?
You can wrap your modal in route like this.
Modal
Then this.props.history.push("/path");
I think React-Router docs already have such examples. You can check following
https://reacttraining.com/react-router/web/example/modal-gallery.
There is npm module available as well https://github.com/davidmfoley/react-router-modal
I'm working on a single-page app with Vue.js and its official router.
I have a menu and a component (.vue file) per every section which I load using the router. In every component I have some code similar to this:
<template>
<div> <!-- MY DOM --> </div>
</template>
<script>
export default {
data () {},
methods: {},
route: {
activate() {},
},
ready: function(){}
}
</script>
I want to execute a piece of code (init a jQuery plugin) once a component has finished transitioning in. If I add my code in the ready event, it gets fired only the first time the component is loaded. If I add my code in the route.activate it runs every time, which is good, but the DOM is not loaded yet, so is not possible to init my jQuery plugin.
How can I run my code every time a component has finished transitioning in and its DOM is ready?
As you are using Vue.js Router, it means that each time you will transition to a new route, Vue.js will need to update the DOM. And by default, Vue.js performs DOM updates asynchronously.
In order to wait until Vue.js has finished updating the DOM, you can use Vue.nextTick(callback). The callback will be called after the DOM has been updated.
In your case, you can try:
route: {
activate() {
this.$nextTick(function () {
// => 'DOM loaded and ready'
})
}
}
For further information:
https://vuejs.org/api/#Vue-nextTick
https://vuejs.org/guide/reactivity.html#Async-Update-Queue
You can use
mounted(){
// jquery code
}
Though this may be a bit late... If I guess correctly, the component having problem stays on the page when you navigate between routes. This way, Vue reuses the component, changing what's inside it that needs to change, rather than destroy and recreate it. Vue provides a key attribute to Properly trigger lifecycle hooks of a component. By changing a component's key, we can indicate Vue to rerender it. See key in guide for details and key in api for code sample.