Nuxt.js+CocktailDB API：点击饮品后无法通过ID展示详情求助

核心问题梳理 #

你遇到的undefined和无法展示详情的问题，主要来自三个关键错误：

1. 列表页跳转时没有传递正确的饮品ID
2. 详情页请求API时URL不完整，且数据赋值错误
3. 模板中this的使用不符合Vue规则

1. 修正 drinks/index.vue #

错误点 #

• v-for的key使用了不存在的drink.id，CocktailDB返回的ID字段是idDrink
• nuxt-link的跳转路径错误，用了未定义的id，应该取当前循环项的drink.idDrink

修正后的代码 #

<template>
  <div>
    <div>
      <SearchDrink/>
    </div>
    <div>
      <!-- 修正key和跳转路径 -->
      <div v-for="drink in drinks" :key="drink.idDrink"> 
        <nuxt-link :to="`/drinks/${drink.idDrink}`">
          <div class="drink">
            <p>{{ drink.strDrink }}</p>
            <img :src="drink.strDrinkThumb" alt=""/> 
            <p>Instructions:</p>
            <p>{{ drink.strInstructions }}</p>
            <div class="ing"> Ingredients: 
              <ul>
                <li>{{ drink.strIngredient1 }}</li>
                <li>{{ drink.strIngredient2 }}</li>
                <li>{{ drink.strIngredient3 }}</li>
                <li>{{ drink.strIngredient4 }}</li>
                <li>{{ drink.strIngredient5 }}</li>
              </ul>
            </div>
          </div>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
import SearchDrink from '../../components/SearchDrink.vue'
import axios from 'axios'

export default {
  components:{
    SearchDrink,
  },
  data(){
    return {
      drinks: [],
    }
  },
 methods: {
    getAllDrinks(){
      axios.get('https://thecocktaildb.com/api/json/v1/1/search.php?s=')
      .then((response) => {
        this.drinks = response.data.drinks
        console.log(this.drinks)
      })
      .catch((error) =>{
        console.log(error)
      })
    }, 
 },
  created(){
    this.getAllDrinks()
  },
  head(){
      return {
          title: 'Drinks App',
          meta: [
              {
                  hid: 'description',
                  name: 'description',
                  content: 'Best place to search a Drink'
              }
          ]
      }
  }
}
</script>

2. 修正 drinks/_id/index.vue #

错误点 #

• 模板中不需要用this.$route.params.id，直接写$route.params.id
• API请求URL缺少https://前缀，导致请求失败
• 数据赋值错误：data里定义的是drink（单数），但代码里给this.drinks（复数）赋值，且API返回的drinks是数组，需要取第一个元素
• 模板中直接显示{{ drink }}会输出对象，需要指定具体属性
• head中的title直接用this.drink会显示对象，需要用具体属性或默认值

修正后的代码 #

<template>
  <div>
    <nuxt-link to="/drinks">
        Go Back
    </nuxt-link>
    <!-- 显示饮品名称而非整个对象 -->
    <h2>{{ drink.strDrink }}</h2>
    <hr>
    <!-- 去掉模板中的this -->
    <small>Drink ID: {{ $route.params.id }}</small>
    
    <!-- 补充更多详情展示 -->
    <img v-if="drink.strDrinkThumb" :src="drink.strDrinkThumb" alt="Drink image">
    <p><strong>Instructions:</strong> {{ drink.strInstructions }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return{
            drink: {}
        }
    },
    methods: {
    getDrinkDetails(){
      // 补全https前缀，修正请求路径
      axios.get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${this.$route.params.id}`)
      .then((response) => {
        // API返回的drinks是数组，取第一个元素赋值给drink
        this.drink = response.data.drinks[0]
        console.log(this.drink) 
      })
      .catch((error) =>{
        console.log(error)
      })
    }, 
 },
  created(){
    this.getDrinkDetails()
  },
  head(){
      return {
          // 用饮品名称作为标题，添加默认值避免报错
          title: this.drink.strDrink || 'Drink Details',
          meta: [
              {
                  hid: 'description',
                  name: 'description',
                  content: `Details for ${this.drink.strDrink || 'a drink'}`
              }
          ]
      }
  }
}
</script>

验证步骤 #

1. 启动项目后，列表页的每个饮品卡片点击后会跳转到/drinks/[id]，其中[id]是正确的饮品ID
2. 详情页会通过ID请求API，正确渲染饮品名称、ID、图片和制作说明
3. 打开浏览器控制台，检查是否有报错，确保API请求返回200状态码

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