javascript - 一旦关闭 Bootstrap vue 警报，它就不再工作了

Question

我正在尝试使用 bootstrap vue alert 构建一个全局警报组件。我正在使用 vuex store 来保持 alert 状态。

下面是我的告警组件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>

下面是我的vuex商店

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;

我在另一个组件中调用警报组件，如下所示

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

showAlert 在此组件中计算为

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

这只适用于第一次。当我第一次触发它时，警报打开。单击关闭图标后，我无法取回警报。

Answer 1

将 show 属性替换为 v-model 以便当您单击关闭按钮时，showAlert 的值会在 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
  }, 
}

也可以尝试将 v-if="showAlert" 替换为 v-show="showAlert" 也许您在组件重新渲染方面遇到了一些问题