vue中如何有效的实现未读消息的记录

Question

现在有这样一个需求：未读的通知都是有个红点的代表未读，这样的话，左侧导航栏上面也是会标注几条消息未读，点击一条通知查看详情之后再返回到这消息列表的话，红点就不存在了，此时左侧导航栏也会少一条未读消息，这个业务逻辑应该都是知道的呢，那么，问题是，我该用一种什么样合理的实现思路去解决这问题。

我的实现方式是： 消息通知列表是数组循环来着的数据，我动态给每条消息加上那个红点的未读标记，我在return中给个属性控制，true的时候显示红点标记，那么我点击查看详情跳转页面的这个事件中，我给那个属性记为false，这样红点标记就不显示啦，问题来啦，我在点击事件效果中是记为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"});
        }
        
        这实现的结果不尽人意哇，各位大佬有没有关于这种消息通知提示的vue操作有没有更好的实现方式哈~

Answer 1

queryDetails(item){
    item.dotVisible = false;//这里是控制红点的吗
    this.$router.push({path: "infoContent"});
}

Answer 2

应该要后端记录吧，前端记录没有意义，你在这里设置了，跳转到详情页面，再跳转回来，不就是原来的数据了吗