从商店中的数组删除时Vue隐藏列表项

Question

当我单击关闭的警报而不是列表中的最后一个警报时，它将自动删除并隐藏（isActive === false）显示下一个警报之后。 为了澄清起见，关闭意味着它在组件中调用了 remove 方法，该方法在商店中调用了 AlertModule.remove 突变。

警报组件

<template>
  <v-layout fixed row wrap>
    <v-flex xs12 v-for="(alert, index) in alerts" :key="index+1">
      <v-alert
        dismissible
        :value="alert.show"
        :type="alert.type"
        :transition="alert.transition"
        :icon="alert.icon"
        :color="alert.color"
        @input="remove(index)"
      >{{alert.message}}</v-alert>
    </v-flex>
  </v-layout>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AlertModule, AlertProp } from '@/store/modules/alert'
@Component
export default class Alerts extends Vue {
  get alerts() {
    console.log('Alert.Vue - get alerts - ', AlertModule.getAlerts)
    let tempAlerts: AlertProp[] = []
    this.$forceUpdate
    return (tempAlerts = AlertModule.getAlerts)
    // return AlertModule.getAlerts
  }
  private remove(index: number) {
    return AlertModule.remove(index)
  }
}
</script>

@ / store / modules / alert

    import { getModule, Module, Mutation, VuexModule } from 'vuex-module-decorators'
import { store } from '@/store'
@Module({
  namespaced: true,
  name: 'AlertModule',
  store,
  dynamic: true
})
class Alert extends VuexModule {
  private alerts: AlertProp[] = []

  public get getAlerts() {
    return this.alerts
  }
  // No setters in Vuex-Module-Decorators - use Mutation
  // public set setAlerts(alerts: AlertProp[]) {
  //   this.alerts = alerts
  // }

  @Mutation
  public concat(alerts: AlertProp[]): void {
    console.log('AlertModule - concatAlerts - ', alerts)
    this.alerts = this.alerts.concat(alerts)
  }

  @Mutation
  public add(alerts: AlertProp): void {
    console.log('AlertModule - concatAlerts - ', alerts)
    this.alerts.push(alerts)
  }

  @Mutation
  public remove(index: number) {
    this.alerts.splice(index, 1)
  }
  @Mutation
  public clear() {
    this.alerts = []
  }
}

const AlertModule = getModule(Alert)
interface AlertProp {
  show: boolean
  message: string
  type: 'success' | 'info' | 'warning' | 'error'
  title?: string
  mode?: 'out-in' | 'in-out'
  transition?: string
  icon?: string
  color?: string
}
export { AlertModule, AlertProp }