Dynamically accessing vuex data in v-for

Question

Is it possible to access vuex data dynamically in a v-for within a template?

I tried accessing it with the $data variable in the template without success:

<template>
    <div v-for="(item, index) in items">
        {{item.id}}: {{$data[item.value]}}<br>        
    </div>
</template>

<script>
    export default {
        name: "test",
        data: () => ({
            items: [
                {id: 'item1', value: "countingDice"},
                {id: 'item2', value: "otherValue"},
            ],
        }),
        computed: {
            ...mapState("countingDice"),
            ...mapGetters("otherValue"),
        }
    }
</script>

The vuex data is injected with a mapState and a mapGetter.

Answer 1

Try to use a method getState as follows :

<template>
    <div v-for="(item, index) in items">
        {{item.id}}: {{getState(item.value)}}<br>        
    </div>
</template>
<script>
    export default {
        name: "test",
        data: () => ({
            items: [
                {id: 'item1', value: "countingDice"},
                {id: 'item2', value: "otherValue"},
            ],
        }),
        computed: {
            ...mapState("countingDice"),
            ...mapGetters("otherValue"),
        },
     methods:{
       getState(val){
      return this[val]; // this returns the computed property with val as name
      }
     }
    }
</script>