时间戳

首页 > 解决方案 > Vue js 错误信息只显示一次。试图弄清楚每次出现错误时如何显示它

vue.js - Vue js 错误信息只显示一次。试图弄清楚每次出现错误时如何显示它

问题描述

我是 Vue 的新手，但我正试图弄清楚如何解决这个问题

我在这里引用了一个组件。

<notification-component v-if="error" :error="error"><notification-component>

我有一个执行 axios 调用的方法，我正在检查 resonse.data['responseCode'] == '500'

如果是 500 则创建这样的变量错误

if(response.data['responseCode'] == "500"){
this.error = response.data['applicationCode']['message'];
}

问题是，如果我运行一次 axios 调用，效果很好！它会运行显示错误就好了。如果我再次运行它（即使存在错误），它也不会显示错误消息。我希望这是有道理的。就像我需要 V-if 但也许与状态有关。

谢谢，丹

标签： vue.js

解决方案

在您的通知组件中添加v-if和关闭hide功能按钮

<div class="ui message" :class="type" v-if="!hidden">
   <i class="close icon" @click="hide"></i>
   <div class="header">
      {{header}}
   </div>
   <slot></slot>
</div>

...
data() {
        return {
            hidden: false
        }
    },
    methods: {
        hide() {
            this.hidden = true
        }
    }

但是如果消息自动关闭（有一些延迟），那么您应该销毁组件并在父级中发出更改。

推荐阅读