鍍金池/ 問答/HTML/ vue中如何有效的實現(xiàn)未讀消息的記錄

vue中如何有效的實現(xiàn)未讀消息的記錄

現(xiàn)在有這樣一個需求：未讀的通知都是有個紅點的代表未讀，這樣的話，左側(cè)導(dǎo)航欄上面也是會標(biāo)注幾條消息未讀，點擊一條通知查看詳情之后再返回到這消息列表的話，紅點就不存在了，此時左側(cè)導(dǎo)航欄也會少一條未讀消息，這個業(yè)務(wù)邏輯應(yīng)該都是知道的呢，那么，問題是，我該用一種什么樣合理的實現(xiàn)思路去解決這問題。

我的實現(xiàn)方式是： 消息通知列表是數(shù)組循環(huán)來著的數(shù)據(jù)，我動態(tài)給每條消息加上那個紅點的未讀標(biāo)記，我在return中給個屬性控制，true的時候顯示紅點標(biāo)記，那么我點擊查看詳情跳轉(zhuǎn)頁面的這個事件中，我給那個屬性記為false，這樣紅點標(biāo)記就不顯示啦，問題來啦，我在點擊事件效果中是記為false了，但是為什么紅點沒有消失；

<div class="foot">

                    查看詳情<i class="iconfont icon-icon_back_s" @click="queryDetails(item)"></i>
                </div>

queryDetails(){

            this.dotVisible = false;
            this.$router.push({path: "infoContent"});
        }
        
        這實現(xiàn)的結(jié)果不盡人意哇，各位大佬有沒有關(guān)于這種消息通知提示的vue操作有沒有更好的實現(xiàn)方式哈~

clipboard.png

回答
編輯回答
浪蕩不羈

應(yīng)該要后端記錄吧，前端記錄沒有意義，你在這里設(shè)置了，跳轉(zhuǎn)到詳情頁面，再跳轉(zhuǎn)回來，不就是原來的數(shù)據(jù)了嗎

2018年1月22日 13:41
編輯回答
失魂人
queryDetails(item){
    item.dotVisible = false;//這里是控制紅點的嗎
    this.$router.push({path: "infoContent"});
}
2018年3月30日 11:42