如何使用 DRF 在 Nuxt.js 中显示动态网址

Question

I just got an answer on how to bring information from DRF to display on the last thread . I want to know more.

I tried following the guide to the basics. But still don't understand Anyone have a way to solve this problem?

I just want to do Dynamic Pages.https://nuxtjs.org/examples/routing-dynamic-pages

How do I get it to be displayed? tree path is

pages

-- _catname

---_product.vue

index.vue

_id.vue

Sorry for asking a lot I'm really a beginner

My _product.vue

 <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 _id.vue

<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>

Answer 1

You should use this keyword in template.

Also let us know what's the error for you and what do you want to achieve?

Answer 2

├─Pages
    ├────index.vue
    ├────_product.vue
    ├────_catname.vue
    ├────_id.vue

Assuming you have above file strcture. In that case _product.vue have only param- product . Hence, product can be filter by params.product only. here is the code.

<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.id === parseInt(params.product)
    )
    if (filteredproducts) {
      return {
        catname: filteredproducts.catname,
        product: filteredproducts.name
      }
    } else {
      redirect('/')
    }
  }
}
</script>