$route.params.id dont want to give id data when clicking on drink. CocktailDB API, nuxt.js - axios

Question

Hello Im doing a simple cocktailapp to practice nuxt.js and axios with coktailDB API https://www.thecocktaildb.com/api.php. In drinks/index.vue I have listed all drinks with v-for. When clicking on a drink you get to drinks/_id/index.vue page where the full info about the drink will get showed by its ID. Im using $route.params.id and I have tried with this.$route.params.id. No drink info get showed. Its just shows undefined and brackets. How can I get the drink info to be showed by its ID after been clicking on a specific drink? Thanks in advance!
Drinks/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>
Drinks/_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

There are quite a few things that be improved here (and the API is a bit messy too).
Here is how I would do it with modern practices.
/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>
Few notes:
I skipped the parts I don't have access to (like your SearchDrink component) or that are not relevant with the current issue
you probably would need to use the axios module
you don't need to import your Nuxt components, it is done for you