V-FOR 不渲染字典

Question

使用 Nuxt 2.14.12，尝试使用 V-FOR 指令显示字典。下面的代码片段显示了试图显示字典 pokiAbilities 的代码。带有V-For的代码段没有被渲染，我不知道为什么。

<template>
    <div>
        <div class="max-w-sm rounded-sm overflow-hidden shadow-lg m-16">
            <div lass="mx-6 my-4 border-b border-gray-light content-center">
                <div class="font-extrabold text-2xl text-gray-darker mb-4 text-center">abilities</div>
            </div>
            <div v-for="(value, index) in pokiAbilities" :key="index">
                <div class="mx-6 my-4 border-b border-gray-light">
                    <div class="font-semibold text-gray-dark text-sm mb-2">
                        <ul class="list-inside bg-rose-200">
                            <li><p>{{ index }}</p></li>
                            <li><p> Effect: </p><p class="text-blue-300 font-black">{{ value.effect }}</p></li>
                            <li><p> Short Effect: </p><p class="text-blue-300 font-black">{{ value.short_effect }}</p></li>
                        </ul>
                    </div>
                </div>
                <div class="mx-6 my-4 flex">
                    <div class="flex-grow">
                        <span class="inline-block bg-red-light rounded-full p-1 pb-0 mr-2">
                            <svg fill="white" width="16" height="16" viewBox="0 0 24 24"> 
                            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

结果图片如下

下面的 pokiAbilities 字典示例

{
  "static":{"effect":"destroy opponent", "language":{"name":"en"},"short_effect":"get dazzled"},
  "lightning-rod":{"effect":"deal 100 dmg", "language":{"name":"en"},"short_effect":"freeze enermy"}
 }

pokiAbilities是通过调用2个API端点，然后在操作JSON数据后构建pokiAbilities。下面的代码

<script>
export default {
    props: {
        pokemon: Object
    },
    data() {
        return {
            pokiAbilities: this.getPokemonAbilities(),
        }
    },
    methods: {
        async getPokemonAbilities(){
            let abilitiesList = this.getPokemonAbilitiesNames()
            let abilities = {}
            for (let i = 0; i < abilitiesList.length; i++) {
                let abi = await this.$axios.$get('https://pokeapi.co/api/v2/ability/'+abilitiesList[i])
                abilities[abilitiesList[i]] = this.getAbilityEn(abi)
            }
            console.log(abilities)
            return abilities
        },
        getPokemonAbilitiesNames(){
            let abilities = []
            for (let i = 0; i < this.pokemon.abilities.length; i++) {
                abilities[i] = this.pokemon.abilities[i].ability.name
            }
            return abilities
        },
        getAbilityEn(abi){
            let enAbi = {}
            abi.effect_entries.forEach(langAbi => {
                if(langAbi.language.name === 'en'){
                    enAbi = langAbi
                }
            });

            return enAbi
        }
    },
}
</script>

第一个 API 调用在父组件中完成，结果（能力名称）在 Pokemon 道具中传递。第二个 API 调用在此组件中完成，以检索基于第一个 API 调用的能力。然后我将这两个结果结合起来，得到这些能力的名称和描述。

每个方法的解释

getPokemonAbilitiesNames() ---> 从 Pokemon 道具获取 pokemon 能力的名称和 returns 这些名称的列表。

getAbilityEn(abi) ---> 获取第二次调用的结果 API（在 getPokemonAbilities() 方法中使用）并确保能力是英文的。

getPokemonAbilities() ---> 获取 getAbility(abi) 和 getPokemonAbilitiesNames() 的结果，将 Names as Key 和 abilities as Values 组合成一个字典。

我试过的东西

尝试在不同的生命周期（created() 和 beforemounted()）中初始化 PokiAbilities 数据
也尝试使用 fetch() 和 asyncData() 但结果相同。

Answer 1

可能您的pokiAbilities没有数据。您可以使用 vue-devtool 检查 pokiAbilities 是否有数据。

Answer 2

为了运行 getPokemonAbilities() 方法初始化 pokiAbilities 以便它可以传递给 V-For 指令，该方法需要运行在异步方法中。我的解决方案是在 async created()

中初始化数据

data() {
        return {
            pokiAbilities: null
        }
    },
    async created() {
        this.pokiAbilities = await this.getPokemonAbilities()
    },

我不完全相信这是正确的做法，但确实有效。

V-FOR 不渲染字典

V-FOR not rendering a dictionary

html

javascript

json

vue.js

v-for