Restarting a JavaScript function upon switching views in Vue.js

Question

Restarting a JavaScript function upon switching views in Vue.js

I am new to working with Vue.js and I have a Laravel app that utilizes it. One issue I am facing is that when the homepage is loading, all elements like owl carousel and rev slider are initialized. However, if I navigate to other routes such as contact or about, then return to the homepage, the sliders and other JavaScript elements do not load.

routes.js
import VueRouter from 'vue-router';
import Home from './components/views/Home.vue';
import About from './components/views/About.vue';
import Contact from './components/views/Contact.vue';


let routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact},
];

export default new VueRouter({
    routes,
    linkActiveClass: 'active'
});

and app.js

import router from './routes';

import './components';

const app = new Vue({
    el: '#app',
    router
});

Is there a way to ensure that functions to initialize carousels and other elements run each time I change views?

javascript laravel-5 vue.js

Answer 1

Answer №1

If you want to include custom JavaScript for each component when it is mounted, you can use the mounted hook.

<script>
    export default {
        mounted () {

        }
    }
</script>

Answer 2

If you want to include custom JavaScript for each component when it is mounted, you can use the mounted hook.

<script>
    export default {
        mounted () {

        }
    }
</script>

Answer 3

Answer №2

For those still searching for a solution, here is how I achieved it. Simply wrap the <route-view/> in a <transition> element which can be styled using CSS. Trigger a method on enter to execute the desired function. This will ensure that the function is called as soon as the component is loaded in the DOM during every route change.

<transition name="slide" v-on:enter="reInitJS">
   <router-view></router-view>
</transition>

<script>
// Import the required function
import {init} from './main';
export default {
  name: 'App', 
  methods: {
    reInitJS(){
      // Call the function
      init(); 
    }
  }
}
</script>

Answer 4

For those still searching for a solution, here is how I achieved it. Simply wrap the <route-view/> in a <transition> element which can be styled using CSS. Trigger a method on enter to execute the desired function. This will ensure that the function is called as soon as the component is loaded in the DOM during every route change.

<transition name="slide" v-on:enter="reInitJS">
   <router-view></router-view>
</transition>

<script>
// Import the required function
import {init} from './main';
export default {
  name: 'App', 
  methods: {
    reInitJS(){
      // Call the function
      init(); 
    }
  }
}
</script>

Restarting a JavaScript function upon switching views in Vue.js

Answer №1

Answer №2

Similar questions

Uncovering the Model within a controller in Ember JS

Angular JS form cloning feature

I am receiving the same URL for multiple files stored on Firebase Storage

The issue arises when trying to access the value that is not defined in the combination of angularjs $

What could be causing this jQuery selector to not select any elements?

The ability to rate the product in Livewire:Laravel is exclusively reserved for buyers

Determine the number of rows in an Ajax-fed datatable (including paginated rows) that have a specific value in a

Bring in SASS variables to enhance Material UI theme in NextJS

Embark on a journey through Express.js routes with a unique context

When working with props.data in MDBNav, learn how to set the active TAB or LINK

Ways to emphasize an HTML element when clicked with the mouse

Choose one of the options provided by the radio button that best fits the question using Playwright

Obtain the breakpoint value from Bootstrap 5

Manipulating and Parsing HTML files locally using Node.js

Retrieve the data from the file input field

Utilizing JavaScript to add classes to a parent element

Press the button to reveal the hidden Side Menu as it gracefully slides out

The output from the Angular .then function is not showing up on the webpage

Problem with image title in jQuery mobile

Using Jquery to iterate through a dynamic list of elements