V-因为没有呈现字典

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

getAbilityEn(abi)

getPokemonAbilities() ->接受getAbility(abi)和getPokemonAbilitiesNames()的结果，并以名称作为键和能力作为值合并到字典中。

THings我试过

beforemounted())

• Tried

• 尝试在不同的生命周期(created()和asyncData() )中初始化PokiAbilities数据，但结果相同。

Answer 1

为了运行getPokemonAbilities()方法来初始化pokiAbilities，以便将其传递给V-For指令，需要在异步方法中运行该方法。我的解决方案是在创建的异步()中初始化数据。

​

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

​

我并不完全相信这是正确的做法，但它起了作用。

Answer 2

也许你的pokiAbilities没有数据。您可以使用vue-devtool来检查pokiAbilities是否有数据。