Динамический доступ к данным Vuex в V-для

Question

Возможно ли получить динамический доступ к данным vuex в v-for в шаблоне?

Я попытался получить к нему доступ с помощью переменной $data в шаблоне, но безуспешно:

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

Данные vuex вводятся с mapState и mapGetter.

Answer 1

Попробуйте использовать метод getState следующим образом:

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