从服务器

Question

我有一个像x-editable插件一样工作的大组件：当用户在字段上cliks它变得可编辑，当用户点击外部时 - 字段变为简单文本并且具有新数据的请求被发送到服务器以验证和存储新值。

当服务器返回代码200（验证已通过）时 - 一切正常。 当服务器在响应体内返回错误文本的代码403时 - 任何后续点击都不会触发更新事件;

以下是我的vue.js组件的摘录（每当输入被更改时调用的函数）

onInputChange() {
            switch(this.inputType) {
                case "select":
                    this.value = this.input.select2("val");
                    break;
                case "date":
                    let d = this.input.datepicker("getDate");
                    if(d) {
                        this.value = moment(d).format("DD/MM/YYYY");
                    }
                    break;
                case "phone":
                    this.value = this.input.val();
                    break;
                case "password":
                    this.value = this.input.val();
                    break;
            }
            if(this.postUrl) {
                let self = this;
                self.errorText = "";
                self.isProcessing = true;
                this.$http.post(this.postUrl, {
                    name: this.name,
                    pk: this.pk,
                    value: this.value
                }).then((response) => {
                    // saved
                    self.isProcessing = false;
                    if(self.isEnabled) {
                        switch(self.inputType) {
                            case "date":
                                self.input.datepicker("hide");
                                break;
                        }
                        self.isEnabled = false;
                    }
                    if(self.model && self.pk) {
                        window.VueBus.$emit(self.model + "_" + self.pk);
                    }
                }, (response) => {
                    self.errorText = response.body;
                    self.isProcessing = false;
                })
            }

        },

这是一个错误，我在控制台中看到

  

app-vue.js：1860 POST http://localhost:8000/user/edit 403（Forbidden）

在网络标签中，我看到该请求返回了正确的错误消息：“输入太短”

Answer 1

由于某些原因，这个差异解决了问题

@@ -5,7 +5,7 @@
                    'form-group': true,
                    'floating-label-form-group': true,
                    'col-lg-12': true,
-                   'has-error': errorText,
+                   'has-error': errorText.length,
                    'floating-label-form-group-with-value': value.length > 0,
                    'floating-label-form-group-editing': isEnabled
            }"
 @@ -110,7 +110,7 @@

                    </span>

-           <p class="help-block" v-if="errorText">
+           <p class="help-block" v-show="errorText.length">
                    {{ errorText }}
            </p>

我在模板中将errorText替换为errorText.length。在所有情况下，errorText只是一个字符串（没有html格式）。