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

楼主解决了吗，我也遇到这个问题了，怎么解决啊

Answer 2

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

Answer 3

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