我的元素只会在热重载后（有时）出现，但不会在首次加载时出现

Question

我有一个名为

SpecPlayer.vue

的文件，其中我使用了一个组件 (

SpecChampionData

)，并且该组件仅在热重载后才会出现（并非总是，有时），但在第一次加载后不会出现。

我是 Vue 新手，我不会每天使用 TS 或 JS，所以请尝试尽可能完整地回答，以便我能够理解这里实际发生了什么。

如您所见，该组件有点“部分”加载。 这就是我的使用方式：

<script setup lang="ts">
import * as art from '@/getArt'
import SpecChampionData from './SpecChampionData.vue'
import { Player } from '@/types/ddata'

defineProps<{
    player: Player | undefined
}>()
</script>
<template>
    <div class="w-full p-4 rounded-md bg-semi">
        <div class="flex flex-row gap-2 flex-nowrap">
            <div class="relative h-20 border-2 aspect-square avatar border-primary">
                <div>
                    <div v-if="player?.isDead"
                        class="absolute inset-0 z-20 flex items-center justify-center aspect-square h-full text-[#ff0000]">
                        <h1 class="text-3xl font-bold">{{ Math.ceil(player.respawnTimer || 0) }}</h1>
                    </div>
                    <img v-if="player?.championName" class="avatar" :class="{
                        'grayscale brightness-50': player?.isDead
                    }" :src="art.getChampIcon(player?.championName)">
                    <img v-else src="/BigFist.png" class="grayscale">
                    <div
                        class="absolute bottom-0 w-7 left-[50%] z-10 translate-x-[-50%] translate-y-[50%] bg-semi border-2 border-primary rounded-full aspect-square flex justify-center items-center">
                        <h1 class="text-sm font-medium text-center text-white">{{ player?.level || 0 }}</h1>
                    </div>
                </div>
            </div>
            <div class="flex flex-col">
                <h1 class="text-xl font-semibold text-primary">{{ player?.summonerName || 'Jugador' }}</h1>
                <h1 class="text-white">{{ player?.championName }} <h1 v-if="player?.skinName"> ({{ player?.skinName }})
                    </h1>
                </h1>
            </div>
        </div>
        <!-- Here is the component -->
        <SpecChampionData :player="player"></SpecChampionData>
    </div>
</template>

这是组件本身：

<template>
    <h1>{{ champData?.lore }}</h1>
</template>
<script setup lang="ts">
import axios from 'axios'
import { Champion, ChampionResponse, Player } from '@/types/ddata'
import { Ref, ref } from 'vue'

const props = defineProps<{
    player: Player | undefined
}>()
const champData: Ref<Champion | undefined> = ref()

const champName = props.player?.championName

axios.get(`https://ddragon.leagueoflegends.com/cdn/14.5.1/data/es_AR/champion/${champName}.json`)
    .then(res => {
        const resData: ChampionResponse = res.data
        if (champName) {
            champData.value = resData.data[champName]
        }
    })
</script>

我尝试重新启动主机，并使用

onBeforeMount

/

onMounted

。我不确定我做错了什么。

Answer 1

props.player

未正确传递。

所以这就是按时间顺序发生的事情 -

1. SpecPlayer.vue

   安装时

   props.player

   值未定义，因为在父组件中，您在调用

   player

   之前没有等待

   SpecPlayer.vue

   值可用。 具有值
   props.player
的

2. undefined

   进一步传播到

   SpecChampionData.vue

   并且 axios 失败，因为名称为

   undefined

   的冠军不存在，这就是您的组件无法正确加载的原因。

当所有这一切发生时，玩家价值变得可用，但所有其他组件都已安装。
当您更新某些内容并热重新加载时，由于
4. player

   值同时可用，因此它会正确传播并加载组件。

为了解决这个问题，请确保仅在拥有组件工作所需的所有必要数据时才加载组件。

在

SpecPlayer.vue

的父级中，如果您有可用的播放器，请确保仅加载

SpecPlayer

组件 - <SpecPlayer v-if="player" :player="player" />

这将确保 

<SpecPlayer />

组件仅在播放器可用时才会加载。

如果仅需要玩家

SpecChampionData.vue

，则将 if 语句进一步移至链下 -

<SpecChampionData v-if="player" :player="player" />

TLDR

- 在调用组件之前您没有等待数据加载，并且 axios 正在尝试获取未定义的数据。