Vue.js v-show指令反应性

Question

我有一个v-show和一个v-for指令的div延伸到我的模板中。

由于我需要显示/隐藏每个索引键，因此我正在v-show函数内部传递索引，这迫使我编写一个方法函数，而不是计算函数。

我的问题是，在某个时候，我想使用Vue来反应性地显示隐藏的div，而无需重新渲染，我将如何实现？

模板

<div
    v-for="(file,index) in cluster.files"
    v-show="showPartialFiles(index)"
    v-bind:key="index"
>

脚本

methods: {
            showPartialFiles: function(index){
                if (index <= this.$store.state.numberOfAssignmentCutoff - 1)
                return true;
            },
    }

p.s。 我可以使用vanilla / JQuery编写代码来完成此任务，但我想将其与Vue一起构建到Vue对象中，以实现将来的可扩展性和可重用性。

非常感谢，芽。

Answer 1

您可以为此使用计算属性，然后v-show将对商店中的更改做出反应；

computed: {
    showPartialFiles() {
        return (index) => {
            return index <= this.$store.state.numberOfAssignmentCutoff - 1
        }
    }
}