在v-for中动态访问vuex数据。

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