Erro no reset

JAILSON FERREIRA DE ARAUJO Criador 28/10/2019
JAILSON FERREIRA DE ARAUJO

Belezinha Carlos, 

 

Quando fiz o reset do formulario no console apresentou esse erro, " 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."

Manager Carlos Ferreira 28/10/2019
Carlos Ferreira

Olá, Jailson!
Tudo bem?

Eu preciso ver mais detalhes do seu código, para conseguir te ajudar a identificar onde errou.

No aguardo de mais detalhes.

Criador JAILSON FERREIRA DE ARAUJO 29/10/2019
JAILSON FERREIRA DE ARAUJO

Ola Carlos,

<script>

    export default {

        name: "FormUserComponent",

        props: {

            userPro: {

                require: false,

                type: Object|Array,

                default: () => {

                    return {

                        id: '',

                        name: '',

                        email: '',

                        status: '',

                        password: '',

                        password_confirmation: '',

                        role_id: '',

                    }

                }

            },

            updating : {

                require: false,

                type: Boolean,

                default: false

            }

        },

        computed: {

            roles (){

                return this.$store.state.roles.itens.data

            }

 

        },

        data (){

            return {

                errors: null,

                user: {

                    id: this.userPro.id,

                    name: this.userPro.name,

                    email: this.userPro.email,

                    status: this.userPro.status,

                    password: this.userPro.password,

                    password_confirmation: this.userPro.password_confirmation,

                    role_id: this.userPro.role_id,

                }

 

            }

        },

        methods: {

            onSubmit(){

                const action = this.updating ? 'updateUser' : 'storeUser'

                this.$store.dispatch(action, this.userPro)

                    .then(() => {

                        this.$snotify.success('Sucesso ao remover', 'Usuario')

                        this.$emit('success')

                        this.reset()

                        if (this.updating)

                            this.$router.push({name: 'admin.users'})

                    })

                    .catch(errors => {

                        this.errors = errors.response.data.errors

                        this.$snotify.error('Erro ao Cadastrar', 'Usuario')

                    })

            },

            reset (){

                this.errors = null

 

                this.user = {

                    id: '',

                    name: '',

                    email: '',

                    status: '',

                    password: '',

                    password_confirmation: '',

                    role_id: ''

                }

            }

        }

    }

</script>

 

 

Não sei se é o certo, criei um DATA pra ser alterado tanto pelo RESET como pela a PROPS, pois na mensagem entendi que não poderia altera uma PROPS diretamente no caso do RESET, então faço o RESET no DATA 

Não sei se entendi certo essa questão de  ONE-WAY-DATA-FLOW, se entendi errado me orienta por favor.

Desde já obrigado

Manager Carlos Ferreira 29/10/2019
Carlos Ferreira

Olá, Jailson!

Entendi o problema.

Como você essa propriedade userPro via props, você não pode alterar ela diretamente no component, para alterar deve emitir um emit para o component pai e alterar.

Esse component é um modal?
Você pode resetar estes valores diretamente no component pai, assim que alguma ação é finalizada/completada dentro do modal;

Entendeu a ideia amigo?

Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!