I'm having a hard time finding nothing. I have the following scenario.
In the HOME page I call a API when I click a button, and then I call the SCHEDULE page passing the% with%. But when I'm on the AGENDA page and click the button again, it does not update the page values anymore, how would I go about this?
I do not quite understand, you would need to check the code to verify exactly this communication, but you will probably need to use a watch or computed property in props or in some of it, in the component of scheduling, where within the watch , after requesting the API, you should always have to update the values, since watch will always observe any change in value of the object you place.
Another way is to use global EventBus , creating a file as mostro below, can be at the root of the project:
import Vue from 'vue'
export const EventBus = new Vue()
So you will import it into both components:
import { EventBus } from './Eventbus.js';
And the Home component that has the button that performs the API request will issue the event, it can be something like:
//...requisição da API
EventBus.$emit('nomeDoEvento', response.body[0])
And the other component, in the case of scheduling or any other that is listening to the event, will receive the last object, so it should have the following, preferably in its mounted () or created () :
EventBus.$on('nomeDoEvento', param () => {
this.objetoOuArrayDeclaradoNoData = param
})
Do not forget to "turn off" the EventBus in beforeDestroy () :
EventBus.$off('nomeDoEvento')