Vue。js v-show指令反应性

Question

我有一个div与一个v-show和一个v-for指令渲染到我的模板。

因为我需要显示/隐藏每个索引键，所以我在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
        }
    }
}