Refreshing url by vue.js

Question

I refresh my page via window.location.reload and setTimeout. It works fine, but when I change a URL, the reload function ticks one last time in a another page.

Any idea how to fix it?

<script setup>
import { Inertia } from "@inertiajs/inertia";
import { useForm } from '@inertiajs/inertia-vue3'
</script>

<template>

...content

</template>


<script>
    methods: {
        reloadPage() {
            window.location.reload();
        },
        reload() {
            setTimeout(this.reloadPage, 10000);
        }
    },
    mounted() {
        this.reload();
    },
    Unmount(){
        clearTimeout(this.reload());
    }

};
</script>

Answer 1

Started using vue.js recently, so bear with me. I think you need to pass the timeoutId into clearTimeout. Since you haven't done that, setTimeout() is running even after the component has been unmounted.

This should work for you!

Edit: Kissu, why did you delete my answer, rewrite it, and then claim an edit? Reported.

export default {
  data: () => ({
    timeoutId: null,
  }),
  methods: {
    reloadPage() {
      window.location.reload();
    },
    reload() {
      this.timeoutId = setTimeout(this.reloadPage, 10000);
    },
  },
  mounted() {
    this.reload();
  },
  beforeUnmount() {
    clearTimeout(this.timeoutId);
  },
};