根据每次迭代调用的方法的结果，在v-for中显示一个容器

Question

我对Vue很陌生，遇到了一个无法解决的问题。

我在Vue有一个for循环。对于每次迭代，我都想调用一个方法来检查属于迭代的项是否在数组中。如果不是：我将把它添加到数组中。如果它已经存在，则该方法返回false。

对我来说似乎很直接，但是。对于每一次迭代，似乎只显示该方法的最后结果。

该方法本身似乎运行良好：console.log返回正确的值。我认为不可能像我那样在每个for循环上调用该方法，但我不知道为什么，也不知道如何使用其他方法。

Vue代码

<div v-for="item in this.assertions" v-bind:key="item.assertion">
<div v-if="showHeader(item.categoryName)">Some text or containers</div>
</div>

Vue方法

showHeader(category) {
if (this.shownHeaders.indexOf(category) === -1) {
this.shownHeaders.push(category);
return true;
}
return false;
},

数据属性

shownHeaders: []

我真的很想了解这是怎么回事！

编辑：让我稍微调整一下我的主要问题：是否可以在for循环中的每次迭代中调用一个方法，并让该方法(每次(返回true或false如果是，怎么做？

Answer 1

这是由所谓的reactivity引起的。每次data属性更改时，都会触发DOM更新。因为您正在不断地将新元素添加到shownHeaders属性中(如果它们还没有(，所以导致了这些更新。只有在所有元素都已经在数组中之后，这些更新才会停止，并且最终状态也会反映在DOM中。

如果你真的想了解发生了什么，你可以阅读以下来源：https://codingexplained.com/coding/front-end/vue-js/understanding-vue-js-reactivity

Answer 2

是否可以在for循环中的每次迭代中调用一个方法，并让该方法(每次(返回true或false？

是的，完全有可能

如果是，如何？

你到底是怎么做的…

---

您的问题既没有包含对代码期望的确切描述，也没有包含对当前行为的准确描述，因此下面的内容只是猜测

如果它不能按预期工作，那不是因为方法调用本身，而是因为方法中的代码在组件的上下文中做了什么。。。

我看到的最大问题是你对Vue中的模板工作方式的误解。主要是模板在每次使用的某些数据发生更改时都会被渲染。

很明显，您的代码编写方式就好像您希望模板只呈现一次一样。得益于shownHeaders数组，类别标头将仅在第一次渲染，并在下次重新渲染组件时隐藏。。。

Answer 3

如果您的目标是获得如下所示的showHeaders，则不能在templates上执行此操作，请尝试您的方法。

<template>
<div>
<button @click.prevent="showHeader()">Click to show Headers</button>
</div>
</template>
<script>
export default {
data(){
return {
assertions: [],            
shownHeaders: []
}
},
methods: {
showHeader() {
assertions.forEach((item) => {
if (this.shownHeaders.indexOf(item.categoryName) === -1) {
this.shownHeaders.push(item.categoryName)
}
})
}
}   
}
</script>