CODEWITHSUNDEEP
javascriptvue.jsbootstrap-4bootstrap-vue
Saradha
Saradha

Reputation: 157

Once dismissed the boostrap vue alert, it's not working again

I am trying to build a global alert component with bootstrap vue alert . I am using vuex store to maintain the state of alert .

Below is my alert component Alert.vue

<template>
  <b-alert show :variant="variant" dismissible> {{ message }} </b-alert>
</template>
<script>
export default {
  props: {
    variant: String,
    message: String
  },
  data() {
    return {};
  },
  name: "Alert",

  methods: {},
  computed: {}
};
</script>
<style scoped></style>

Below is my vuex store 

const alert = {
  namespaced: true,
  state: {
    variant: "",
    message: "",
    showAlert: false
  },
  getters: {
    variant: state => state.variant,
    message: state => state.message,
    showAlert: state => state.showAlert
  },
  mutations: {
    setSuccessvariant(state) {
      state.variant = "success";
    },
    setDangervariant(state) {
      state.variant = "danger";
    },
    setMessage(state, message) {
      state.message = message;
    },
    showAlert(state) {
      state.showAlert = true;
    },
    hideAlert(state) {
      state.showAlert = false;
    }
  },
  actions: {}
};

export default alert;

I am calling the alert component in another component like below 

<alert v-if="showAlert" :message="message" :variant="variant"></alert>

showAlert is computed in this component as

showAlert() {
      return this.$store.getters["alert/showAlert"];
   }

This works only first time. Alert opens when I trigger it for the first time. Once I click on dismiss icon, I could not get back the alert.

Upvotes: 4

Views: 3525

Answers (2)

Stan Sokolov
Stan Sokolov

Reputation: 2260

You have to control what happens on dismissed event. Component show attribute does not accept anything other than true or false what is rarely a thing you really use as a trigger to show the alert.

So do NOT use a v-model bound to a string attribute that you expect to be not null as long as alert has to be shown. It will not work.

This component is not able to evaluate non-boolean flags.

Use v-bind:show as shown bellow

    <b-alert v-bind:show="error!=null" 
dismissible variant="danger" @dismissed="error=null">
        {{error}}
    </b-alert>

When alert is dismissed it will set error to null and it will flip the state of show condition. Then if you again set error to something, it will properly flip the state.

Upvotes: -1

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

Replace the show property with v-model so that when you click the dismiss button the value of showAlert gets updated in vuex store:

<b-alert 
  v-model="showAlert" 
  :variant="variant" 
  dismissible
> {{ message }} 
</b-alert>

...

computed: {
  showAlert() {
    get() {
      this.$store.getters["alert/showAlert"]
    },
    set(value) {
      // MODIFY THIS MUTATION
      this.$store.commit("setShowAlert", value)
    }
  }
}

Vuex:

mutations: {
  setShowAlert(state, value) {
    state.showAlert = value
  }, 
}

Also try replacing v-if="showAlert" with v-show="showAlert" perhaps you have some issue with component re-rendering

Upvotes: 5

Related Questions