Vue项目中Pokemon API图片展示与名称校验问题求助

一、修复图片显示问题 #

你当前直接输出pokemonId.image的URL文本，需要用<img>标签绑定图片地址才能渲染图片。修改模态框内的图片展示部分：

<div class="modalHeader">
  <!-- 用img标签渲染图片，v-if避免初始值为空时的报错 -->
  <img v-if="pokemonId.image" :src="pokemonId.image" alt="随机Pokemon" style="max-width: 100%; height: auto;" />
</div>

说明：

• :src="pokemonId.image" 绑定API返回的图片URL
• v-if="pokemonId.image" 确保只有当图片地址存在时才渲染标签，避免初始状态下pokemonId为空导致的错误
• 内联样式max-width:100%; 让图片自适应模态框宽度

二、实现输入框名称校验功能 #

需要给输入框绑定响应式变量，添加校验逻辑：

1. 组件脚本部分补充 #

在组件的脚本中添加响应式变量和校验方法（假设是Vue3组合式API）：

import { ref } from 'vue';
import { ElMessage } from 'element-plus'; // 导入Element Plus的提示组件

// 绑定输入框的响应式变量
const userInput = ref('');
// 假设你已经定义了pokemonId和game变量
// const pokemonId = ref({});
// const game = ref(false);

// 校验名称的方法
function checkPokemonName() {
  // 忽略大小写比较，因为API返回的Pokemon名称是小写格式
  const inputName = userInput.value.trim().toLowerCase();
  const targetName = pokemonId.value.name.toLowerCase();

  if (inputName === targetName) {
    ElMessage.success('答对啦！');
    // 可选：答对后关闭模态框并获取新的Pokemon
    game.value = false;
    GetPokemons();
  } else {
    ElMessage.error('答错了，再试试吧！');
  }
}

2. 修改模态框内的输入框和按钮 #

更新输入框的v-model绑定，以及Submit按钮的点击事件：

<el-dialog v-model="game" title="Who's that pokemon?" width="35%" height="50%" center>
  <div class="modalHeader">
    <img v-if="pokemonId.image" :src="pokemonId.image" alt="随机Pokemon" style="max-width: 100%; height: auto;" />
  </div>
  <div class="footer">
    <div class="inputDiv">
      <!-- 绑定输入框到响应式变量 -->
      <input class="pokeNameInput" type="text" placeholder="输入Pokemon名称" v-model="userInput" />
    </div>
    <span>
      <!-- 绑定校验方法到提交按钮 -->
      <el-button id="submitBtn" @click="checkPokemonName">Submit</el-button>
      <!-- 修正模态框关闭变量为game，原代码的LogInModalVisible是笔误 -->
      <el-button id="skipBtn" @click="game = false">Skip
        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
      <el-button id="pokedexGameBtn" @click="game = false">Pokedex</el-button>
    </span>
  </div>
</el-dialog>

说明：

• 修正了按钮关闭模态框的变量为game（与模态框v-model一致，原代码的LogInModalVisible是错误的）
• 校验时忽略大小写，适配用户输入的大小写差异
• 使用trim()去除输入的首尾空格，避免空格导致的误判

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