[英]How can fetch data in NUXT.JS on DRF
我嘗試了 NUXT 並嘗試按照他網站上的手冊進行操作。 但現在我遇到了從 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": "*****"
},
我嘗試按照基礎指南進行操作。 但是還是不明白 有沒有辦法解決這個問題?
我只想做 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.