Javascript Vue v-if未更新

以下是我的Vue模板的一部分：

... 

基本上，friends是一个对象数组，如果我们有来自其中任何一个对象的新消息，我想显示span元素。这就是

checkIfNew（）

所做的。它检查朋友的id是否在

未编辑的数组中（它包含发送消息的朋友的id）

此数组正在以不同的方法更新，但问题是：
v-if
对更改没有反应

以下是脚本部分的一部分：

data（）{
返回{
未经证实的：[]
}
},
方法：{
checkIfNew（id）{
如果（此.unreads中的id）返回true
否则返回false
}
},
计算：{
用户（）{
返回此。$store.getters.user；
}
}

有人知道我做错了什么吗？
id在这里。未经证实的
不会做你认为它会做的事。请参阅文档以了解详细信息。如果对象具有作为属性的值，它将返回
true
。因此，如果
this.unedids
有3项，并且您的id为
1
，那么
中的
操作符将返回
true
，因为
1
是数组的属性（
this.unedids[1]
存在）

相反，您应该使用

尝试像这样重写您的方法：

data(){
   return {
      unreadIds: []
   }
},
computed:{
    user(){
      return this.$store.getters.user;
    },
    NewFriends() {
       return this.user.friends.filter(friend => this.unreadIds.includes(friend.id));
    }
}

checkIfNew（id）{
返回此.未读.包含（id）；
}


以下是该组件的工作版本，它更新列表时不使用Vuex存储代码：



{{friend.name}



导出默认值{
数据（）{
返回{
未经证实的：[5]，
用户：{
朋友们：[
{id:1，名字：'joe'}，
{id:5，名字：'nancy'}，
{id:9，名字：'sue'}，
],
},
};
},
创建（）{
setTimeout（（）=>this.unreads.push（9），2000）；
},
方法：{
checkIfNew（id）{
返回此.未读.包含（id）；
},
},
};


为了证明David一直以来都是正确的，我把这段代码放在一个可运行的代码段中，找不到任何错误


Vue.config.productionTip=false
新Vue({
el:“#应用程序”，
数据（）{
返回{
未兑现：[]，
};
},
创建（）{
setTimeout（（）=>this.unreads.push（9），2000）；
},
方法：{
checkIfNew（id）{
//如果（此.unreads中的id）返回true
//否则返回false
返回此.未读.包含（id）；
},
},
计算：{
用户（）{
返回{
朋友们：[
{id:1，名字：'joe'}，
{id:5，名字：'nancy'}，
{id:9，名字：'sue'}
]
}
}
}
})



{{friend.name}


我要试试看——有人早些时候发布了这篇文章并将其删除了。您需要
checkIfNew（）
作为模板中反应性的计算方法，而不是方法

由于需要传入id，因此计算出的需要返回一个函数

data（）{
返回{
未经证实的：[]
}
},
计算：{
用户（）{
返回此。$store.getters.user；
},
checkIfNew（）{
返回（id）=>{
返回此.未读.包含（id）；
}
}
}

正如David Weldon所说，理想情况下，您应该不变地更改阵列-可能还有为什么ohgodwhy会问最初的问题。
您希望利用Vue的反应系统，而之前的答案没有。。它们最终会让你面临难以解释的问题，而这些问题不容易调试

与其调用
v-for
中的方法（我保证这在将来会成为问题），不如声明一个包含（或不包含）要呈现的项的计算列表，如下所示：

data(){
   return {
      unreadIds: []
   }
},
computed:{
    user(){
      return this.$store.getters.user;
    },
    NewFriends() {
       return this.user.friends.filter(friend => this.unreadIds.includes(friend.id));
    }
}

您的标记将是：



... 



Vue的反应系统将处理
新朋友
的数据依赖关系的任何更改

您不希望在模板中使用方法调用，因为方法调用只保证被调用一次（这同样适用于来自计算方法的函数…）

如果您发现自己试图手动触发重新渲染和依赖性检查，您将需要重新思考您的设计

ETA：您唯一希望调用模板中任何类型函数的时间是响应事件
 向我们展示您如何更新
unreadIds
@ohgod为什么它在apollo$subscribe部分，结果是：this.unreadIds.push（…）。我知道数组本身正在正确更新。当你说“v-if对更改没有反应”时，这是不必要的，因为它在循环中。您需要的是循环对更改做出反应，这意味着进行计算，例如
friends（）{return this.user.friends}
，并以此为基础进行循环。@eric99感谢x2未经修改的ID是发送新消息的朋友的ID。我会编辑这个问题，真的confusing@RichardMatsen信息不会影响朋友。因此，当新消息到达时，朋友不会改变。所以这个循环是基于朋友的，但我希望它也能对未经证实的行为做出反应……是否有必要使用伪行进行依赖性检查？@user1538301。。。事实上，这并不是因为它看起来有点粗糙。只需将checkIfNew（）设置为一个计算的固定值就可以了。根据Linus Borg（Vue Contibutter）的这一点，返回函数的计算属性是可以的。关于应该做什么和不应该做什么，似乎有很多未经证实的说法，但请记住，Vue的设计是开放和灵活的，而不是固执己见的。评论不用于扩展讨论；与其他答案相比，这是最好的练习！这位官员还建议这样做。