I am working with Vue and Laravel, the issue is that I made an error class and as the form works with 3 different components.

For example I have the base form of this form and further down I have a child component of the form both are sent in the same form but I can't figure out how to pass the error message to that component that is in another vue file.

I tried to pass the error message as a prop but it doesn't take it and inside that child component I used watch to capture the error but it doesn't capture it at all.

Error Class

class Errors{
    constructor(){
        this.errors = {};
    }

    get(field){
        if (this.errors[field]) {
            return this.errors[field][0];
        }
    }

    record(errors){
        this.errors = errors.errors;
    }
}

export default Errors;

**Parent component: CreateClient **

<template>

    <contract v-for="contract in contractsFields" :key="contract.id"
        :id="contract.id"
        :resultForm="onResultsContracts"
        :hasErrors="errors"
        @remove="removeContract"
    ></contract>

</template>

<script>
import Errors from '../../class/Errors.js'
import Contract from '../contratos/ContractComponent.vue'

export default {
    name: 'CreateClient',
    props: ['results'],
    components:{
        Contract
    },
    data() {
        return {
            errors: new Errors(),
        }
    },
   sendForm(){
            const params = {
                client: this.formClient,
                company: this.formCompany,
                contract: this.formContract
            }

            axios.post(route('clients.store'),params)
                .then((res) => {
                    this.errors = []
                    console.log(res)
                })
                .catch(error => {
                    if (error.response.status === 422) {
                        this.errors = error.response.data.errors || {};
                    }
                })
        }
}
</script>

Child Component

<script>
import Errors from '../../class/Errors.js'
import AreaClient from '../clients/AreasClientComponent.vue'
export default {
    name: 'Contract',
    components: {
        AreaClient
    },
    props:['id','resultForm','hasErrors'],
    data() {
        return {
            error: new Errors(),
        }
    },
    watch: {
        hasErrors: function(){
            console.log(this.hasErrors) // No working
        }
    },
}
</script>

CodePudding user response：

Have you tried a deep watcher for your object?

hasErrors: {
    deep: true, 
    handler () {
      // do whatever you would like to do
    }
  }