如何在不同名称的 vee-validate 中显示服务器错误？

Question

在我的 vue/cli 4/vuex/bootstrap-vue 项目/“vue-router”：“^3.1.3”/ “vee-validate”：“^3.2.1”/“vue-resource”：“^1.5.1”，项目我使用后端休息来保存数据和 我遇到了从服务器获取错误的问题，例如

{"message":"The given data was invalid.","errors":{"title":["The title has already been taken."]}}

我无法在我的表单上显示它，因为它是包含许多元素的大表单，而模态表单有更多 复杂的名称，而不是“标题”，我想这就是服务器错误未显示的原因：

<b-modal id="saveCurrentFilterModal" scrollable size="lg" style="min-width: 720px !important;">

    <ValidationObserver
            ref="saveCurrentFilterModalForm"
            v-slot="{handleSubmit}"
    >

    <form ref="form" @submit.stop.prevent="handleSubmitOnSaveCurrentFilterOptionsSubmit">
        <b-form-group
                :state="nameState"
                label="Name"
                label-for="name-input"
                invalid-feedback="Name is required"
        >
            <ValidationProvider
                    name="save_current_filter_title" // MORE COMPLICATED TITLE NAMW!
                    rules="required|max:100"
                    v-slot="{ errors }"
            >
                <b-form-input
                        id="save_current_filter_title"
                        v-model="save_current_filter_title"
                        placeholder="Edit saved filter title"
                        autocomplete="off"
                ></b-form-input>
                <p class="validation_error">{{ clearErrorMessage(errors[0]) }}</p>
            </ValidationProvider>
        </b-form-group>

        <b-button type="submit" size="sm" variant="outline-secondary" class="ml-4">
            <i :class="'action_link '+getHeaderIcon('save')"></i>Save
        </b-button>

    </form>
    </ValidationObserver>



    handleSubmitOnSaveCurrentFilterOptionsSubmit() {
        this.$refs.saveCurrentFilterModalForm.validate().then(success => {
            console.log('handleSubmitOnSaveCurrentFilterOptionsSu  success::')
            console.log(success)

            if (!success) {
                return;
            }

            let filters = {
                ...
            }

            let self = this
            self.$http.post(self.apiUrl + '/personal/ad-saved-filters', filters).then(({data}) => {
                console.log(data)
                self.showPopupMessage("Saved filter", 'Saved filter was successfully saved !', 'success');
                self.$bvModal.hide('saveCurrentFilterModal')
            }, error => {
                console.error(error)
                self.$refs.saveCurrentFilterModalForm.setErrors(error.body.errors);  // TO GET ERRORS FROM
                self.showPopupMessage("Saved filter", error.body.message, 'warn');

            });

        });
    },  // handleSubmitOnSaveCurrentFilterOptionsSubmit(evt) {

有办法解决吗？

Answer 1

当您调用setErrors 时，您必须指定正确的字段名称。因此，如果服务器返回title 但您需要save_current_filter_title，则您必须拥有某种对象来跟踪服务器字段名称和客户端字段名称之间的关系。例如，在客户端，您可以这样：

       let filters = {
            ...
        }

        let self = this
        self.$http.post(self.apiUrl + '/personal/ad-saved-filters', filters).then(({data}) => {
            ...
        }, error => {
           //define this in data, but for example:
           var sKey2cKey = {
               title: 'save_current_filter_title',
               name: 'complicated-client-name',
               //etc
           }, convertedErrors = {};
           Object.keys(error.body.errors).forEach((key) => {
               convertedErrors[sKey2cKey[key]] = error.body.errors[key];
           });
           self.$refs.saveCurrentFilterModalForm.setErrors(convertedErrors);  
            self.showPopupMessage("Saved filter", error.body.message, 'warn');

        });