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

Question

在我的vue/cli4/vuex/bootstrap-vue项目/"vue-router":"^3.1.3"/ "vee-validate": "^3.2.1" / "vue-resource": "^1.5.1",project 我使用后端 rest 来保存数据和我有一个问题，就是从

这样的服务器获取错误

{"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 时，您必须指定正确的字段名称。因此，如果服务器 returns 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');

        });

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

How show server's error in vee-validate with different name?

vee-validate