Vue.js v-show 指令反应性

Question

I have a div with a v-show and a v-for directive rending into my template.

Since I need to show/hide per index key, I am passing the index inside the v-show function, which forces me to write aa method function, rather than a computed function.

My question is that at a certain point, I would like to use Vue to show the hidden divs reactively, without re-rendering, how would I accomplish that?

Template

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

Script

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

ps I have no problem writing in vanilla/JQuery to accomplish this yet I want to build this with Vue into the Vue object for extensibility and reusability in the future.

Many thanks, Bud.

Answer 1

You can use a computed property for that, then the v-show will react to changes in the store;

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