我想从mongoDB数据库中获取数据，但不是所有的数据从集合只有一个数据更新它在我的管理页面管理我的产品页面，但通过下面的代码，我不能得到，这是错误的consol。
GET http://localhost:3000/products/5edbe6e824982635ac07e859 500 (NuxtServerError)
这是Nuxt项目中的前端代码，文件在==> adminpagesproducts_id.vue中。
_id.vue
export default {
async asyncData({$axios,params }) {
try {
let products= $axios.$get('http://localhost:8000/api/products,${params.id}');
const [productsResponse] = await Promise.all([
products
]);
console.log(productsResponse);
return {
products:productsResponse.products
};
} catch (err) {
console.log(err);
}
},
data() {
return {
product:{
cityID:null,
categoryID:null,
productname: '',
cellphone: null,
licensenumber: null,
address: '',
rating: null
}
};
并有另一部分关于把数据，但正如我所说的，我有问题，在获得单一数据的集合。
我可以得到所有的数据，但不能得到单个数据，我想这是包含{params.id}的部分问题。
和后端代码是
产品.js
//GET request - get a single style
router.get("/product/:id", async (req, res) =>{
try {
let product = await Product.findOne({ _id:req.params.id});
res.json({
success:true,
product:product
});
}catch (err) {
res.status(500).json({
success:false,
message:err.message
});
}
});
这就是错误。
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "cities" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Pages/products/Id.vue> at pages/products/_id.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "categories" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Pages/products/Id.vue> at pages/products/_id.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
这是模板给出的错误 城市 和 类别 而这是错误的
<template>
<div>
<b-container>
<b-row class="background-add">
<b-col>
<!-- title-->
<b-row>
<b-col cols="12">
<div>
<p class="title-add-page">
Update{{product.productname}}
</p>
</div>
</b-col>
</b-row>
<!-- city-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<div>
<b-form-select
v-model="product.cityID">
<option
v-for="city in cities"
:value="city._id"
:key="city._id"
>
{{city.type}}
</option>
</b-form-select>
</div>
</b-col>
</b-row>
<!-- district-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<div>
<b-form-select v-model="product.categoryID">
<option
v-for="category in categories"
:value="category._id"
:key="category._id"
>
{{category.type}}
</option>
</b-form-select>
</div>
</b-col>
</b-row>
<!-- product Name-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
type="text"
class="inputs-login"
v-model="product.productname"
placeholder="productName"
>
</b-form-input>
</b-col>
</b-row>
<!-- Cellphone-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
type="tel"
class="inputs-login"
v-model="product.cellphone"
placeholder="Cellphone"
>
</b-form-input>
</b-col>
</b-row>
<!-- License Number-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
class="inputs-login"
v-model="product.licensenumber"
placeholder="License Number"
>
</b-form-input>
</b-col>
</b-row>
<!-- Address-->
<b-row align-h="center" class="row-select-address">
<b-col cols="12" md="7">
<b-form-input
type="text"
class="inputs-login"
v-model="product.address"
placeholder="Address"
>
</b-form-input>
</b-col>
</b-row>
<!-- License Number-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
type="text"
class="inputs-login"
v-model="product.rating"
placeholder="Rating"
>
</b-form-input>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="12" md="7">
<b-button block type="submit" variant="outline-success"
click="onUpdateProduct">Add</b-button>
</b-col>
</b-row>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import axios from "axios";
export default {
async asyncData({$axios,params }) {
try {
let cities = $axios.$get('http://localhost:8000/api/cities');
let categories = $axios.$get('http://localhost:8000/api/categories');
let product= $axios.$get('http://localhost:8000/api/product/${params.id}');
const [cityResponse, catResponse,productResponse] = await Promise.all([
cities,
categories,
product
]);
console.log(productResponse);
return {
cities: cityResponse.cities,
categories: catResponse.categories,
product:productResponse.product
};
} catch (err) {
console.log(err);
}
},
data() {
return {
product:{
cityID:null,
categoryID:null,
productname: '',
cellphone: null,
licensenumber: null,
address: '',
rating: null
},
};
},
methods:{
onUpdatePrpduct(){
let newproduct = {
cityID: this.product.cityID,
categoryID: this.product.categoryID,
productname: this.product.productname,
cellphone: this.product.cellphone,
licensenumber: this.product.licensenumber,
address: this.product.address,
rating: this.product.rating,
}
console.log(newProduct)
axios.post('http://localhost:8000/api/product', newProduct)
.then(( response) => {
console.log(response);
})
.catch((error) =>{
console.log(error);
});
}
}
}
</script>
asyncData的返回值将与data的值合并。例如，async data返回project，那么data也应该返回project。
export default {
data () {
return { project: 'default' }
},
asyncData (context) {
return { project: 'nuxt' }
}
}
试着把你的数据改成这样。声明城市和类别的默认值
data() {
return {
product:{
cityID:null,
categoryID:null,
productname: '',
cellphone: null,
licensenumber: null,
address: '',
rating: null
},
cities: [],
categories: []
};
},
你的asyncData返回值{cities,category,product}。但数据只返回{product}的值。由于数据中默认没有城市的值，所以当模板开始渲染时，城市是未定义的。