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;
            },
    }

附言 我用 vanilla/JQuery 编写来完成这一点没有问题，但我想用 Vue 将它构建到 Vue 对象中，以便将来实现可扩展性和可重用性。

非常感谢，巴德。

Answer 1

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

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