一旦解除了引导 vue 警报，它就不再工作了

Posted 2023-02-22

【中文标题】一旦解除了引导 vue 警报，它就不再工作了

【英文标题】：Once dismissed the boostrap vue alert, it's not working again

【发布时间】：2020-04-03 13:22:11

【问题描述】：

我正在尝试使用 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"];
   

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

【问题讨论】：

我相信（必须检查文档以确认）一旦警报被解除，它就会被销毁。要取回它，您应该重新创建它

有什么要求？一旦警报被解除，showAlert 状态将设置为 false，因为它应该是并且警报消失。如果您希望显示新的警报消息，则需要进行必要的突变以更新警报消息并将 showAlert 状态更改为 true。

每当用户执行操作时，我都会将 showAlert 设置为 true .. this.$store.commit("alert/showAlert");. 但是解除的警报如何使 showAlert 为 false？因为我没有在我的代码中处理它。

dismissable 将使警报从 dom 中消失。您可以不使用它，而是使用自定义关闭按钮并侦听其上的单击事件，然后在您自己的事件侦听器中更改您的 redux 状态。另一种方法是监听您的可关闭警报关闭事件并将 showAlert 设置为 false，一旦返回 true，将呈现新警报。

【参考方案1】：

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

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

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

使用 v-bind:show 如下所示

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

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

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

【讨论】：

更改是否仍然无法正常工作.. 在解除警报时出现以下错误未知突变类型：警报/showAlert下面是我的警报组件

@Saradha 这只是意味着您的 vuex 商店中没有该名称的突变。我更新了代码。如果它仍然不起作用，只需更改计算属性中的突变名称，使其与您的 vuex 存储中的突变名称匹配。

@Saradha 没问题，很高兴我能帮上忙