0

Estou tendo uma dificuldade e não achei nada sobre. Tenho o seguinte cenario.

Na pagina HOME eu chamo uma API ao clicar em um botão, e logo em seguida, chamo a pagina AGENDAMENTO passando os retornos da API via props. Porem, quando estou na pagina AGENDAMENTO e clico novamente no botão, ele não atualiza mais os valores da pagina, como eu faria para contornar esse problema?

2
  • 1
    Cara eu não sei se entendi direito, mas se você quer atualizar a sua página você pode usar o this.$forceUpdate(), com isso ele força o vue a atualizar as variáveis na página.
    – Aesir
    19/12/2017 às 11:23
  • Como estás a setar os valores vindos da API e como estás a usar as propsdentro de "agendamento"? se as props forem passadas a data só são lidas uma vez, tens de ter uma cadeia/sequência de código reactiva.
    – Sergio
    16/01/2018 às 19:31

1 Resposta 1

0

Não entendi muito bem, precisaria verificar o código para verificar exatamente esta comunicação, mas provavelmente será necessário a utilização de um watch ou computed property nas props ou em alguma dela, no componente de agendamento, onde dentro do watch, após a requisição da API, você deve fazer com que sempre atualize os valores, uma vez que o watch sempre irá observar qualquer alteração de valor do objeto que você colocar.

Outra maneira é com a utilização de EventBus global, criando um arquivo como mostro abaixo, pode ser na raiz do projeto:

import Vue from 'vue'

export const EventBus = new Vue()

Assim, você fará a importação do mesmo em ambos os componentes:

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

E o componente Home que possui o botão que realiza a requisição da API fará a emissão do evento, pode ser algo como:

//...requisição da API
EventBus.$emit('nomeDoEvento', response.body[0])

E o outro componente, no caso o de agendamento ou qualquer outro que estiver escutando o evento, receberá o objeto passado, para isto ele deverá possuir o seguinte, preferencialmente em seu mounted () ou created ():

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

Não se esqueça de "desligar" o EventBus no beforeDestroy ():

EventBus.$off('nomeDoEvento')

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .