$route.params.id 不想在点击饮料时提供 id 数据。 CocktailDB API，nuxt.js

Question

你好，我正在做一个简单的cocktailapp来使用coktailDB API练习nuxt.js和axioshttps://www.thecocktaildb.com/api.php。在饮料/index.vue 中，我列出了所有带 v-for 的饮料。单击饮料时，您将进入饮料/_id/index.vue 页面，其中将通过其 ID 显示有关饮料的完整信息。我使用 $route.params.id 并且我尝试过 this.$route.params.id。没有显示饮料信息。它只显示未定义和括号。点击特定饮品后如何通过ID显示饮品信息？预先感谢！

饮料/index.vue；

<template>
  <div>
  <div>
    <SearchDrink/>
  </div>
  <div>
  <div v-for="drink in drinks" :key="drink.id"> 
  <nuxt-link :to="'drinks/' + id">
    <div class="drink">
    <p> {{ drink.strDrink
    }} </p>
    <img :src="drink.strDrinkThumb" alt=""/> 
    <p>Instructions:</p>
    <p> {{ drink.strInstructions }} </p>
    <div class="ing"> Ingridients: 
      <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
        const myDrink = response.data.drinks
        console.log(myDrink)
        console.log(myDrink.strDrinkThumb)  
        })
    .catch((error) =>{
      console.log(error)
    })
    
    }, 
 },
  created(){
    this.getAllDrinks()
  },
  // methods: {
  //   searchDrink(){
  //     if(!this.search){
  //       return this.drinks
  //     }else{
  //       return this.drinks.filter(drink => 
  //       drink.text.toLowerCase().includes(this.search.
  //       toLowerCase()))
  //     }
  //   }
  // },
    head(){
        return {
            title: 'Drinks App',
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: 'Best place to search a Drink'
                }
            ]
        }
    }
}
</script>

饮料/_id/index.vue；

<template>
  <div>
    <nuxt-link to="/drinks">
        Go Back
    </nuxt-link>
    <h2> {{ drink }} </h2>
    <hr>
    <small>Drink ID: {{ this.$route.params.id }}</small>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return{
            drink: {}
        }
    },
    methods: {
    getAllDrinks(){
      axios.get(`www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${this.$route.params.id}`)
      .then((response) => {
        this.drinks = response.data.drinks
        const myDrink = response.data.drinks
        console.log(myDrink) 
        })
    .catch((error) =>{
      console.log(error)
    })
    
    }, 
 },
  created(){
    this.getAllDrinks()
  },
  head(){
        return {
            title: this.drink,
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: 'Best place to search a Drink'
                }
            ]
        }
    }
}
</script>

Answer 1

这里有很多东西需要改进（API 也有点混乱）。
这是我用现代实践的方法。

/pages/drinks/index.vue

<template>
  <div>
    <div v-for="drink in drinks" :key="drink.idDrink">
      <nuxt-link :to="`/drinks/${drink.idDrink}`">
        <div class="drink">
          <p>{{ drink.strDrink }}</p>
          <img width="100px" height="100px" :src="drink.strDrinkThumb" alt="" />
          <p>Instructions:</p>
          <p>{{ drink.strInstructions }}</p>
          <div class="ing">
            <p>Ingredients:</p>
            <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>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      drinks: [],
    }
  },
  async fetch() {
    await this.getAllDrinks()
  },
  methods: {
    async getAllDrinks() {
      try {
        const { data } = await axios.get(
          'https://thecocktaildb.com/api/json/v1/1/search.php?s='
        )
        this.drinks = data.drinks
      } catch (error) {
        console.log('error', error)
      }
    },
  },
}
</script>

/pages/drinks/_id.vue

<template>
  <div>
    <nuxt-link to="/drinks"> Go Back </nuxt-link>
    <h2>{{ drink.strGlass }}</h2>
    <hr />
    <small>Drink ID: {{ $route.params.id }}</small>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      drink: {},
    }
  },
  async fetch() {
    await this.getAllDrinks()
  },
  methods: {
    async getAllDrinks() {
      try {
        const { data } = await axios.get(
          `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${this.$route.params.id}`
        )
        this.drink = data.drinks[0]
      } catch (error) {
        console.log('error', error)
      }
    },
  },
}
</script>

---

一些注意事项：

• 我跳过了我无法访问的部分（例如您的

  SearchDrink

  组件）或与当前问题无关的部分
• 您可能需要使用 axios 模块
• 您不需要导入 Nuxt 组件，它已经为您完成了