After receiving guidance on integrating information from DRF into Nuxt.js, I find myself eager to learn more. I followed the basic instructions but still struggle to grasp the concept. Can anyone offer a solution to this issue?
I am particularly interested in creating dynamic pages and came across an example on Nuxt.js dynamic page routing. How can I implement this effectively? The tree path structure is as follows:
pages
-- _catname
---_product.vue
index.vue
_id.vue
Apologies for the numerous questions, as I am a beginner seeking clarification.
My code for _product.vue is as follows:
<template>
<div>
<h1>CAT NAME: {{ catname }}</h1>
<h2>Product ID: {{ id }}</h2>
<p>Path: {{ $route.path }}</p>
<NuxtLink to="/">Back to All Product</NuxtLink>
</div>
</template>
<script>
export default {
async asyncData({ params, redirect }) {
const products = await fetch(
'http://127.0.0.1:8000/product_api/api/v1/Product/'
).then((res) => res.json())
const filteredproducts = products.results.find(
(el) =>
el.catname === params.catname &&
el.id === params.id
)
if (filteredproducts) {
return {
catname: filteredproducts.catname,
product: filteredproducts.name
}
} else {
redirect('/')
}
}
}
</script>
And my code for _id.vue is as follows:
<template>
<h1>{{ this.id }}</h1>
</template>
<script>
export default {
async asyncData({ params }) {
const id = await params.id // When calling /abc the slug will be "abc"
return { id }
}
}
</script>