How to access prop by property name from in vuejs

Question

I want to access the error message returned from my api if error exists for its corresponding input field. With what I have tried, all errors returned from the api shows below all input fields as in the image below.

Below are the parent and child vue components.

InputField.vue

<template>
        <div class="form-group basic">
            <div class="input-wrapper">
                <label class="label" :for="name">{{label}}</label>
                <input :type="type" 
                    class="form-control" 
                    :class="errorClassObject()"
                    :id="name" :placeholder="placeholder" 
                    :v-model="value" @input="updateField">
                    <i class="clear-input">
                        <ion-icon name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon>
                    </i>
            </div>
            <div v-text="errorMessage(name)" class="input-info text-danger">Error here</div>
        </div>
</template>


<script>
export default {
    name: "InputField",

    props: [
        'name', 'value', 'type', 'label', 'placeholder', 'errors'
    ],

    data: function() {
        return {
            
        }
    },

    computed: {
        hasError: function(){
            return this.errors
            //return this.errors.name throws an error name is undefined
        }
    },

    methods: {
        updateField (){
            this.$emit('input', event.target.value)
        },

        errorMessage(name){
           if(this.hasError){
                return this.errors;
                //return this.errors.name throws undefined name
            }
            
        },

        errorClassObject (){
            return{
                'error-field': this.hasError
            }
        }

        

    }
}
</script>

<style scoped>
    
</style>

ChangePassword.vue

<template> 

<form @submit.prevent="onSubmit">
                        
                        <form-input 
                            required 
                            name="current_password" 
                            type="password" 
                            label="Current Password" 
                            :errors="errors" 
                            placeholder="Enter current password" 
                            v-model="passwordForm.current_password" 
                        />
                        <form-input .../>
                        <form-input.../>
                        <div class="form-button-group  transparent">
                            <button type="submit" class="btn btn-primary btn-block btn-lg">Update Password</button>
                        </div>

                    </form>

</template>

Presently, if there are any errors from the request, the response is returned in the format below

Answer 1

You could get access to it using the square brackets like :

    errorMessage(name){
       if(this.hasError){
            return this.errors[name];
            
        }
        
    },