如何从 vuejs 中通过属性名称访问 prop答案

【问题标题】：How to access prop by property name from in vuejs如何从 vuejs 中通过属性名称访问 prop
【发布时间】：2021-05-31 08:58:42
【问题描述】：

如果相应的输入字段存在错误，我想访问从我的api 返回的错误消息。通过我的尝试，从 api 返回的所有错误都显示在所有输入字段下方，如下图所示。

下面是父子vue组件。

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>

目前，如果请求中出现任何错误，则以以下格式返回响应

【问题讨论】：

标签： api vue.js

【解决方案1】：

您可以使用方括号访问它，例如：

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

【讨论】：