[Vuejs]-How can display dynamic urls in Nuxt.js with DRF

by

0👍

You should use this keyword in template.

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

0👍

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

Leave a comment