Vue.js v-show directive reactivity

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

p.s. 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.

1 answer

  • answered 2019-10-22 08:04 Erik Terwan

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