CODEWITHSUNDEEP
vue.jsionic-framework
cesur swrod
cesur swrod

Reputation: 11

Vue navigating the same route with different params, elements point to first route loaded for different routes

When I navigate to a route with params I can reference the elements in the page for example refresh them or add new div, but if I route to another page and then to the same route with different params then I can not reference any element on the page or they point to the first time I loaded page with params. Is there a way around it, I tried forceupdate the component and wrapping it in keepalive.

router/index.ts

import { createRouter, createWebHistory } from '@ionic/vue- 
router';
import { RouteRecordRaw } from 'vue-router';
import SomePage from '@/views/SomePage.vue';

const routes: Array<RouteRecordRaw> = [
{
    path: '/some/:id',
    name: 'SomePage',
    component: SomePage
}
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

And in my App I watch for route changes and awnt to refresh/manipulate dom elements

 watch:{
    $route (to, from){
      if(to.name == 'SomePage') {
         this.emitter.emit("addDatePickerToSomePage", {});
      }
    }
 }

But after first page open with params in the following page loads with different params I can not manipulate dom the elements on page all point to the first time I loaded page with params and only that one works when I go back to it

Upvotes: 0

Views: 27

Answers (1)

cesur swrod
cesur swrod

Reputation: 11

Ok so I was looking it up and when I use ref instead of like getelementbyid it did work.

Upvotes: 0

Related Questions