Atualizar array componente Vue - Echo.channel (listen)
[Concluído]
Boa tarde!
Estou desenvolvendo uma aplicação que os dados são atualizados por um command.
Neste command, chamo um Controller que realiza as seguintes ações:
> Inclusão dos dados;
> broadcast(new \App\Events\SendMessage($dados));
Na página vue, implementei o listen usando o Echo.channel e o mesmo funiona normalmente retornando o array com os dados atualizados.
Minha dúvida é a seguinte:
Na página vue, que montei a estrutura de visulização, tenho um "v-for" que mostra os dados do array.
Como faço para apenas atualizar os dados que já estão sendo mostrados na página ao invés de fazer um push e incrementar?
<tr v-for="item in dados" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.valor }}</td>
</tr>
Olá, Felipe!
Tudo bem?
Por que precisa atualizar os dados que estão mostrados na página, quando alterou estes dados não foi direto no Vue.js não?
Se os dados que deste array retornado da API estão atualizados, pode simplesmente atualizar a view com eles.
Me dê um pouco mais de detalhes pra eu poder te ajudar.
E tem o código no GitHub?
Bom dia Carlos!
Como lhe disse, os dados são atualizados via command. Com isso, não tenho nenhuma interação como PUT, GET ou outra ação.
No Controller, tenho a função que insere os dados, esta função é chamada pelo Command.
Neste caso, após inserir os dados via "$dados = FatDados::create(...", realizo a chamada do seguinte comando: broadcast(new \App\Events\SendMessage($dados));
No arquivo .vue, no método mounted(), escrevi o código do Echo.channel('dados').listen. A seguir está o código especificado da página vue.
Echo.channel('dados')
.listen('SendMessage', (e) => {
Vue.set( this.dados, this.dados.findIndex( f => f.CHAVE === e.CHAVE ), e );
}
);
Antes de usar o comando Vue.set, eu estava tentando usar o push. Porém, este comando estava apenas incrementando a tabela ao invés de atualizar os dados conforme a CHAVE.
OBS.: Quando abro a página, faço o carregamento dos dados conforme suas aulas. no método created() fiz uma chamada de um método que realiza um dispatch em uma action, e esta dispara um commit em um mutation.
Olá, Felipe!
Você tem o código no GitHub?
Porque assim consigo ter uma dimensão melhor do seu projeto, e posso ser mais cirúrgico em te ajudar.
No aguardo amigo.
Qual seu usuário no GitHub para que eu possa compartilhar o projeto com você?
Chegou a comparar o seu código com o do curso?
Meu usuário [email protected]
Bom dia Carlos!
Essa dúvida está no mesmo código que compartilhei com você no outro tópico.
Repositório: https://github.com/feliperesilva/apexcharts/
Olá, Felipe!
Como a sua dúvida é algo bem particular, vou te pedir que envie um e-mail para [email protected] (com o número do ticket: 1201) e combine um horário, aí vou baixar o seu projeto, testar ele e te dá um feedback na data e horário marcado.
Aguardo o seu contato amigo.
Bom dia a todos!
De acordo com a minha conversar com o Carlos, o mesmo me orientou que o código utilizado está correto.
Tendo em vista que os dados que chegam para mim a todo o momento é o conjunto inteiro, e não apenas um registro para ser adicionado.
Obrigado!
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!