Vue组件异步Axios请求后playerEl.value为null致渲染失败求助

核心问题分析 #

1. 非响应式变量导致渲染异常：你用var gameData声明的变量不是Vue的响应式变量，Axios请求完成赋值后，Vue无法感知数据变化，无法触发模板更新。
2. 模板渲染报错破坏DOM结构：初始渲染时gameData为undefined，模板直接访问gameData.title会抛出Cannot read properties of undefined错误，导致组件渲染失败，playerEl对应的DOM元素未被正确挂载，最终playerEl.value变为null。

修复步骤 #

1. 将gameData改为响应式变量：用Vue的ref声明响应式数据，确保数据变化能触发模板更新。
2. 避免模板渲染报错：使用可选链操作符?.或者v-if控制渲染时机，防止访问未初始化的属性。
3. 确保DOM元素存在时操作Ruffle：操作DOM前加判断，避免极端情况下DOM未挂载就执行代码。

修复后的代码 #

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";

// 改为响应式ref变量，初始值设为null
const gameData = ref(null);
const slug = window.location.pathname.split('/').pop();
const playerEl = ref(null);

onMounted(async () => {
  try {
    const response = await axios.get(`https://api.flasoyun.com/game/${slug}`);
    gameData.value = response.data;
    
    // 确保playerEl存在再执行Ruffle初始化
    if (playerEl.value) {
      const ruffle = window.RufflePlayer.newest();
      const player = ruffle.createPlayer();
      playerEl.value.appendChild(player);
      player.load(`/games/${slug}.swf`);
    }
  } catch (error) {
    console.error('Error fetching game data:', error);
  }
});
</script>

<template>
  <div>
    <div class="container">
      <div class="row g-4">
        <div class="col-lg-8 mx-auto">
          <!-- 使用可选链避免访问undefined属性 -->
          <h2>{{ gameData?.title }}</h2>
          <div class="ratio ratio-16x9">
            <div id="player" ref="playerEl"></div>
          </div>
          <!-- 用v-if确保gameData存在时再渲染内容 -->
          <div v-if="gameData">
            {{ gameData.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

额外说明 #

• 用ref声明gameData后，赋值必须通过.value操作，这是Vue 3响应式ref变量的要求。
• 若需要更精确控制DOM更新时机，可在赋值gameData.value后使用nextTick，确保模板更新完成再操作Ruffle：

  await nextTick();
  // 再执行Ruffle初始化代码
  

内容的提问来源于stack exchange，提问作者codemonkey