应用过渡时，vuetify v-alert错误地忽略了同级

问题描述

我正在使用带有v-alert的vuetify v-for=alert in alerts，并在alerts数组中循环，当警报被取消时@input事件被触发，我将其从alerts数组中删除

我面临的问题是，单击元素时，将应用过渡，并且同级警报现在显示在被解雇的那个位置，似乎也为同级元素触发了click事件而同级v-alert为isVisible == false，但不会触发@input事件。

如果我从v-警报中删除了transition="scroll-y-reverse-transition"，则它可以正常工作。

为什么会这样？

const alertsComponent = {
  name: "MyAlertsComponent",template: "#alerts",data() {
    return {
      alerts: []
    };
  },created() {
    this.$root.$off("alert");
    this.$root.$on("alert",this.adDalert);
  },methods: {
    closeAlert(idx,alert) {
      console.log(`deleting alert idx: ${idx} - ${alert}`);
      this.$delete(this.alerts,idx);
    },adDalert(alert,...args) {
      alert.type = alert.type || "error";
      this.alerts.unshift(alert);
    }
  }
};

const app = new Vue({
  el: "#app",vuetify: new Vuetify(),components: {
    alertsComponent
  },mounted() {
    [...Array(8).keys()].forEach((e) => {
      this.fireAlert(this.counter++);
    });
  },methods: {
    fireAlert(val = this.counter++) {
      const alert = this.generatealert(val);
      this.$root.$emit("alert",alert);
    },generatealert(val,type = "error") {
      return {
        val,type
      };
    }
  },data() {
    return {
      counter: 1
    };
  }
});

.alert-section {
  max-height: 400px;
  padding: 5px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <header>VueTify!</header>
        <hr>
        <v-row>
          <v-col>
            <v-btn @click="fireAlert()">Add Alert</v-btn>
          </v-col>
        </v-row>
        <alerts-component>Hi</alerts-component>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<template id="alerts">
  <div>
    <div class="alert-section overflow-y-auto">

      <v-alert v-for="(alert,index) in alerts" :key="index" dense dismissible elevation="5" text :type="alert.type" @input="closeAlert(index,alert)" @adDalert="adDalert" 
         transition="scroll-y-reverse-transition"
         >
        {{ alert.val }}

      </v-alert>

    </div>

    <hr>
    <pre class="code">{{ JSON.stringify(alerts,null,2) }}
    </pre>

  </div>
</template>

解决方法

看起来问题出在使用索引作为键。

如果我更改po("scale")，它将正常工作。