0

I'm new to Vue, but I'm trying to figure out how to solve this issue

I have a reference to a component here.

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

I have a method that does an axios call and I'm checking the resonse.data['responseCode'] == '500'

if it is 500 then create the variable error like this

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

The problem is that if I run the axios call once, it works great! It will run display the error just fine. If I run it again (Even those the error exists), it doesn't show the error message. I hope this makes sense. It's like I need the V-if but maybe something with the state.

Thanks, Dan

Dan Kelly
  • 35
  • 7
  • It would help to see more of your code, but you may need to add a watch to the 'error' prop in your child component. See this SO [How to listen for props changes](https://stackoverflow.com/questions/44584292/how-to-listen-for-props-changes) – Tim Feb 15 '21 at 15:18

1 Answers1

0

In your notification component add v-if and close button with hide function

<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
        }
    }

But If message is automatically closed (with some delay), then you should destroy component and emit changes in parent.

proofzy
  • 627
  • 1
  • 12
  • 23