Vue скрывает элемент списка при удалении из массива в хранилище - PullRequest
Новая
       5

Vue скрывает элемент списка при удалении из массива в хранилище

0 голосов
/ 24 января 2019

Когда я нажимаю закрыть на предупреждении, которое не является последним в списке, оно удаляет само по себе и скрывает (isActive === false) следующее после него , Просто чтобы уточнить, закрытие означает, что он вызывает удалить метод в компоненте, который вызывает 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>

@ / магазин / модули / предупреждения 

    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 }
...