Vue.js 组件在从服务器返回错误后停止工作

Posted 2023-02-23

【中文标题】Vue.js 组件在从服务器返回错误后停止工作

【英文标题】：Vue.js component stops working after returning error from server

【发布时间】：2017-06-17 00:21:43

【问题描述】：

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

当服务器返回代码 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（禁止）

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

【问题讨论】：

控制台出现任何错误？

DD/MM/YYYY 不是有用的日期格式。每当您在技术系统之间传输日期时，请使用YYYY-MM-DD，无一例外。您始终可以格式化日期以供显示，但对于传输或存储在文件中，您真的应该使用标准化格式。

YYYY-MM-DD 确实是可取的，但时间戳是一个不错的选择。

嗯，这可能不是直接的 vue 问题——你有一些限制和后端，所以 API 返回 403 状态码。所以考虑让你的代码向服务器发送正确的数据。

这与后端无关。 Vue.js 组件在服务器返回 403 时接收数据并在组件内部设置 errorText。问题是：它在它之后停止更新。

【参考方案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 格式）。