一旦关闭引导程序 vue 警报，它就不再工作了

Question

我正在尝试使用 bootstrap vue alert 构建一个 global alert component 。我正在使用 vuex 存储来保持警报状态。

下面是我的警报组件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 商店中更新：

<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"，也许您在组件重新渲染方面遇到了一些问题

Answer 2

您必须控制在取消事件时发生的事情。组件 show 属性不接受除 true 或 false 以外的任何内容，您很少真正将其用作触发器来显示警报。

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

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

使用 v-bind:show 如下所示

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

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

一旦关闭引导程序 vue 警报，它就不再工作了

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

javascript

vue.js

bootstrap-4

bootstrap-vue

Vuex：