[Vuejs]-Combining v-for with v-show on same element in template

by

0👍

✅

I ended up removing this from everything but the v-for, as suggested, and the code worked. Why this causes an error in v-show and v-html is still a mystery.

Final, working code:

<div v-for="(entry, entryindex) in this.$store.state.entries"
 v-bind="{id:entryindex}"
 v-bind:key="entryindex" 
 v-show="$store.state.queryMatchedEntries[0] == -1 || $store.state.queryMatchedEntries.indexOf(parseInt(entryindex)) != -1">
👤repertor

0👍

Your problem is occurring because you are referencing this inside your template. This is not necessary.

The first thing I recommend you do is have a read into Vuex’ Getters. Further down on the same page, you’ll find information about mapGetters. This will help to prevent you from directly targeting/modifying data within your state. Modification of data should be left only to Mutations and Actions.

For example, your code may look like the below:

// in your component script
...
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      allEntries: 'entries', // map state.entries to the name 'allEntries'
      queriedEntries, // your other state value. You may want to convert this to a getter
      // other state values if necessary
    })
  }
}
...


// in your component template
<template>
    <div id="entries">
        <div v-for="entry in allEntries"
            v-html="entry.content"
            v-show="queriedEntries.includes(entry.id)">
        </div>
    </div>
</template>
...

Here you can see that we have used mapState which helpfully generates computed getter functions from our data in the store. We can then use the property name we have assigned it to within our template.

👤Kwesi

Leave a comment