如何在DRF上的NUXT.JS中获取数据 [英] How can fetch data in NUXT.JS on DRF

问题描述

我尝试了NUXT，并尝试遵循他网站上的手册.但是现在我陷入了从DJANGO提取数据的问题.

I tried NUXT and tried following the manual on his website. But now I'm stuck with the problem of fetching data from DJANGO.

这是我的代码.

  <template>
  <div>
    <ul v-for="product in products" :key="product.results.id">
      <NuxtLink :to="`/${product.results.id}`">
        <li>{{ product.results.id }}</li>
      </NuxtLink>
    </ul>
  </div>
</template>
<script>
export default {
  async asyncData() {
    const products = await fetch(
      '***/product_api/api/v1/Product/?format=json'
    ).then((res) => res.json())
    // .then(productmap => console.log(productmap.results[0].name))

    return { products }
  }
}
</script>

和我的JSON

{
    "count": 46786,
    "next": "***/product_api/api/v1/Product/?limit=100&offset=100",
    "previous": null,
    "results": [
        {
            "id": 2,
            "catID": "TOO08",
            "catname": "เครื่องมือช่าง",
            "sku": "1690",
            "name": "เส้นเอ็น SL NO.50",
            "brand": "ระกา",
            "price": "40",
            "detail": "เส้นเอ็น SL NO.50",
            "imgurl1": "****",
            "imgurl2": "****",
            "productclick": "*****"
        },

我尝试按照基本指南进行操作.但是还是不明白有人能解决这个问题吗?

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

我只想创建动态页面.https://nuxtjs.org/examples/routing-dynamic-pages

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

推荐答案

您应该遍历 products.results 数组

<template>
  <div>
    <ul v-for="product in products.results" :key="product.id">
      <NuxtLink :to="`/${product.id}`">
        <li>{{ product.id }}</li>
      </NuxtLink>
    </ul>
  </div>
</template>

这篇关于如何在DRF上的NUXT.JS中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！