Reloading Page from MainLayout

[CynthiaBlue]

I have a select in my main layout so the user can quickly navigate to a specific dog. This works great when the user is not on the dog details page (the destination of the input).

But if the user is still on the dog details page, and tries to go to a new dog, the dog details page doesn't reload.

This is my select that is on the main layout:

       <q-select
          outlined
          standout
          bottom-slots
          style="width: 350px"
          v-model="dogForDropDown"
          :options="dogArrayOptions"
          label="Go Directly To a Dog"
          bg-color="primary"
          color="primary"
          label-color="white"
          @update:model-value="goDirectToDog(dogForDropDown)"
          > 
          <template v-slot:prepend>
            <q-icon 
            name="far fa-dog" 
            color="white"
            />
          </template>
        </q-select>

This is the method in the main layout that takes the user to the Dog Details page:

 async goDirectToDog(theDogKey) {
      console.log("MainLayout dogForDropDown: ", this.dogForDropDown)
      this.$router.push({name: 'Dog Details', params: {passDogID: theDogKey.dogID, passType: 'fromDropDown'}})
    }

How do I make it so when a new dog is chosen in the select, the new dog details show on the page?

Apparently, neither the Created method nor the Mounted methods in the destination page (Dog Details) fire off when a new dog is selected and the user is still on the dog details page. So if I guess the $router.push doesn't really re-fire if the user is already on the destination page.

I figure if I can detect the changed dog, I can re-query the database to load the values for the new dog. But how do I run another query if I can't tell if a new dog has been selected? How do I pass a value from the main layout to the dog details page if nothing reloads? I don't really want to run the query from the main layout, but I guess I can if I have to.

This is a screenshot of where my select is:

[CynthiaBlue]

I am still trying to find a solution to this problem. Anyone have any input?

[pdanpdan]

https://router.vuejs.org/guide/advanced/navigation-guards.html

beforeRouteEnter and beforeRouteUpdate

[CynthiaBlue]

I have been reading and trying those options but I still don't understand how to force a data reload from the layout to the page. I can get the new dog data in the layout, and get the dog's info, but passing that information to the dog page and reloading the array on the dog page is something I still don't understand.

[metalsadman]

You can use a key on the component that you want to reload

[CynthiaBlue]

But the component is on a different page entirely. I don't think I'm getting that point across. :p

[metalsadman]

you have many techniques to communicate, either use a store, emit an event, use an event bus, etc.... this is just general vue stuff.