根据每次迭代调用的方法的结果在 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>