感悟：想法和思路才是最重要的、程式碼才是其次，我用了一種麻煩的方法來實現，中間還出錯了，解決了很久。後來請教公司大神，忽然醒悟還有一種超級簡單的方法來實現，其實之前自己也是通過這種簡單地方式來實現的，但是這次解決這個問題的時候就是沒有想到，看來真的遇到問題的時候還是要不恥下問的。

專案詳情：邏輯是，我根據後臺傳過來的陣列來彈出來相對應的彈框，陣列的長度就是彈框的數量，換句話來說，就是彈框是通過陣列遍歷出來的，幾個陣列就是幾個彈框，所以這就涉及到了關閉相對應彈框的需要

自己的笨方法：通過索引來關閉對應的彈窗

（1）資料來源

//接受到的資料
 _this.$store.state.xiaofang.socketData.SmokeAlarm = data.messageData
 for (var i = 0; i < data.messageData.length; i++) {
   // 陣列長度只要大於0 說明就有彈框出現，遍歷的是陣列，陣列長度即陣列中物件的個數就是彈框的個數
    if (data.messageData.length > 0) {
      // 通過i變數來控制每一個彈框的展示  
        _this.$store.state.xiaofang.baojignStyle[`huozaiLeftStyle${i}`] = true
        console.log(_this.$store.state.xiaofang.baojignStyle[`huozaiLeftStyle${i}`])
      }
  }
 

（2）收到資料之後的頁面處理

// $store.state.xiaofang.baojignStyle['huozaiLeftStyle'+index]  倉庫中取得變數
// 'container-' + index  用ref使用的字串
// 單獨把這兩個說明一下，就是因為我最起始的時候把變數寫成了字串的形式，導致花費了很久的時間改bug

<div v-for="(item, index) in arr" :key="index" :class='"yangan" + index'
v-show="$store.state.xiaofang.baojignStyle['huozaiLeftStyle'+index]"  
:ref="'container-' + index">

    <div>中間要展示的內容</div>

    <el-button @click="baojingConfirm(index, item)">關閉報警</el-button>

</div>
    
 

（3）關閉處理（刪除對應的彈框）

//關閉對應的彈框
baojingConfirm (index) {
  this.$store.state.xiaofang.baojignStyle[`huozaiLeftStyle${index}`] = false
}

大神提示的簡單的方法：通過刪除陣列的方式來關閉彈框

（1）接受到資料

//接受到的資料
 _this.$store.state.xiaofang.socketData.SmokeAlarm = data.messageData
 if (data.messageData.length > 0) {
  // 所有的彈框都用一個控制
   _this.$store.state.xiaofang.baojignStyle.huozaiLeftStyle = true
 }
 

（2）收到資料之後的頁面處理

// 所有的彈框都用 $store.state.xiaofang.baojignStyle.huozaiLeftStyle 一個變數控制
<div v-for="(item, index) in arr" :key="index" :class='"yangan" + index'
v-show="$store.state.xiaofang.baojignStyle.huozaiLeftStyle"
:ref="'container-' + index">

    <div>中間要展示的內容</div>

    <el-button @click="baojingConfirm(index, item)">關閉報警</el-button>

</div>

（3）關閉（通過刪除陣列來關閉彈框）

//關閉對應的彈框  splice方法會改變原始陣列
baojingConfirm (id, item) {
  this.arr.splice(id, 1)        
}