How to give a "Refresh" on the page in Vue

Asked

Viewed 1,784 times

0

I’m having a hard time and I haven’t found anything about it. I have the following scenario.

On the page HOME I call a API by clicking a button, and then I call the page SCHEDULING passing the returns of API via props. But when I’m on the page SCHEDULING and click again on the button, it no longer updates the page values, as I would do to get around this problem?

javascript vue.js
  • 1

    Dude I don’t know if I got it right, but if you want to update your page you can use the this.$forceUpdate(), with this it forces Vue to update the variables on the page.

  • How are you set the values coming from the API and how you are using the propswithin "scheduling"? if the props are passed to data are only read once, you must have a reactive string/code sequence.

1 answer

0

I did not understand very well, I would need to check the code to verify exactly this communication, but it will probably be necessary to use a watch or computed Property in props or any of it, in the scheduling component, where within the watch, after the API request, you should always have to update the values, since the watch will always observe any change in value of the object you place.

Another way is with the use of Eventbus global, creating a file as shown below, can be at the root of the project:

import Vue from 'vue'

export const EventBus = new Vue()

Thus, you will import the same in both components:

import { EventBus } from './Eventbus.js';

And the Home component that has the button that performs the API request will issue the event, 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 object passed, for this he should have the following, preferably in his mounted () or created ():

EventBus.$on('nomeDoEvento', param () => {
   this.objetoOuArrayDeclaradoNoData = param
})

Don’t forget to "turn off" the Eventbus in the beforeDestroy ():

EventBus.$off('nomeDoEvento')

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.