Javascript 如何按id正确拼接阵列项

我有一个简单的弹出组件，在我的应用程序中的某些地方，当点击事件发生时会调用它。弹出窗口是在单击时创建的，并在一个数组中按入，该数组稍后会显示，以便当用户多次单击按钮时，会显示多个弹出窗口。一旦有人点击X，成功的会消失，红色的会消失，我通过从数组中拼接它们来实现这一点，但是如果用户生成5个弹出窗口并点击X，那么下一个弹出窗口就会关闭，而不是用户点击的那个弹出窗口，所以我似乎不是针对数组中的特定弹出顺序，而是下一个，我怎样才能正确地定位准确的点击模式，使其关闭，而不是下一个，我在这里做错了什么？我应该如何正确地拼接阵列，以便以精确的推送模式为目标，而不是其他模式

这是我的密码：

<template>
  <div class="main">
    <div 
      v-for="item in array" 
      :key="item.id"
      :class="['popUp', `popUp--type--${item.popUpTypeType}`]" 
    >
      <div class="popUp-side">
        <p class="exclamation-mark">!</p>
      </div>
      <h5 class="popUp-message">{{item.message}}</h5>
      <div class="popUp-side">
        <p class="closing-x" @click="closeMessage" v-if="item.popUpTypeType === 'danger'">X</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
   name: 'popUp',
   data: () => ({
    array:[],
  }),
  methods: {
    removepopUpType() {
       var self = this;
       var id = Math.round( Math.random()*1e13 );
       var index = self.array.map(x => {
       return x.id;
       }).indexOf(id);
        self.array.splice(index, 1);
    },
    callpopUpType(obj){
      var newpopUpType = {
            popUpTypeType: obj.type,
            message: obj.message,
            id: obj.id
          };
      if(obj.type === 'success'){
       setTimeout(this.removepopUpType, 2000)
      }
      this.array.push(newpopUpType);
    },

    closeMessage() {
    this.removepopUpType()
    },

  },
  created() {
    this.$root.$on('call-popUp', this.callpopUpType);
  },
  destroyed(){
    this.$root.$off('call-popUp', this.callpopUpType);
  }
}
</script>

{{item.message}
x
导出默认值{
名称：“弹出窗口”，
数据：（）=>({
阵列：[]，
}),
方法：{
removepopUpType（）{
var self=这个；
var id=Math.round（Math.random（）*1e13）；
var index=self.array.map（x=>{
返回x.id；
}).indexOf（id）；
自身阵列拼接（索引1）；
},
callpopUpType（obj）{
var newpopUpType={
popUpTypeType:obj.type，
消息：obj.message，
id:obj.id
};
如果（obj.type==='success'）{
setTimeout（this.removepopUpType，2000）
}
this.array.push（newpopUpType）；
},
closeMessage（）{
this.removepopUpType（）
},
},
创建（）{
this.root.on（'call-popUp'，this.callpopUpType）；
},
销毁（）{
this.root.off（'call-popUp'，this.callpopUpType）；
}
}

示例中有很多不寻常的代码，因此我可能遗漏了一些内容，但您不能将

项

传递给该方法吗

<p
  v-if="item.popUpTypeType === 'danger'"
  class="closing-x" 
  @click="closeMessage(item)"
>X</p>

---

关于

Math.round（Math.random（）*1e13）

，什么是如此精确（“因此我将精确的推送模式作为目标”）呢？而

self.array.splice（index）

不会只删除一个元素。给定

id

不太可能匹配任何内容，

index

只会是

-1

。将

-1

传递到

splice

只会从数组中删除最后一项。

closeMessage(item) {
  const index = this.array.indexOf(item);
  if (index >= 0) this.array.splice(index, 1)
},