一旦解除了引导 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

您必须控制被解雇事件发生的情况。组件显示属性不接受除 true 或 false 之外的任何内容，您很少真正将其用作显示警报的触发器。

因此，只要必须显示警报，就不要使用绑定到您希望不为空的字符串属性的 v-model。它不会起作用。

此组件无法评估非布尔标志。

使用 v-bind:show 如下所示

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

当警报被解除时，它会将错误设置为空，并将翻转显示条件的状态。然后如果你再次设置错误，它会正确地翻转状态。

Answer 2

将show 属性替换为v-model，这样当您单击关闭按钮时，showAlert 的值会在 vuex 存储中更新：

<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"，也许您对组件重新渲染有一些问题