[PROMOÇÃO] Assine com + 30% de desconto ANUAL MENSAL (últimas horas)

component filho passando propriedade para o pai

[Finalizado Pelo Aluno]

wendel
Criador wendel 26/06/2020

Estou com esse erro e queria resolver mas se eu tentar por sair gambiarra, vc poderia me dizer como corrigir esse erro:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "product"

found in---> at resources/assets/js/components/admin/pages/products/partials/ProductForm.vueat Vodal.vue at resources/assets/js/components/admin/pages/products/ProductsComponent.vue  at resources/assets/js/components/admin/AdminComponent.vue

Esse é o meu github: https://github.com/wendelbia/laravelapivue

Manager Carlos Ferreira 26/06/2020

Olá, Wendel!
Tudo bem?

A forma de passar valor de um component filho para um pai, é através de events, ou centralizando no vuex.

Veja essa aula: https://academy.especializati.com.br/aula/emit-vue-js

Carlos Ferreira
Criador wendel 26/06/2020

fiz assim ProductForm:

criei um método prod(){} e no método 

OnSumit enviei para o ProductsComponent assim

OnSubmit(){

...

.then(() => {...

     this.reset()

     this.$emit(prod())

     e fiz assim também:

    this.prod() 

})

}

e no método prod:

prod () {

   this.product = {

   id: '',

   name:'',

...

} e assim também

prod(){

this.product

}

mas não deu certo poderia ver o q está errado meu git é: https://github.com/wendelbia/laravel

wendel
Criador wendel 26/06/2020

Não está buscando mais os dados na model para poder editá-los, mesmo usando só response, response.product e  response.data.

wendel
Manager Carlos Ferreira 26/06/2020

O seu emit ficou errado, o correto é:
this.$emit('nomeDoEvento', valorDaPropriedadeQueVaiEnviar)

Seu objetivo é atualizar o valor no parent quando atualizar o registro, certo?
Você tem dois caminhos. 1º, atualizar o valor no vuex, assim não precisa ficar enviando os valores entre os components (o objetivo do vuex é justamente resolver isso).
2º, recarregar os dados atualizados da API sempre que atualizar/cadastrar um registro, assim como foi feito no curso.

Carlos Ferreira
Criador wendel 26/06/2020

Beleza entendi! Deu certo! Obrigado

wendel
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!