get data by id from MongoDB by using Axios Vue.js and Node.js

Question

i want to get data from mongoDB database but not all data from collection only one data to Update it in my Admin Page to manage my product page but by below code i can't get and this is error in consol

GET http://localhost:3000/products/5edbe6e824982635ac07e859 500 (NuxtServerError)

and this is frontend code in Nuxt project the file is in ===> admin/pages/products/_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
        }

      };

and have another part about put data but as i said i have problem in get single data in collection

it's good to say i can get all data but can't get single data i think there is problem in part that include {params.id}

and backend code is

product.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
        });

    }
});

Answer 1

according to nuxt documentation. asyncData return value will be merged with data value. For example, async data return project, then data should return project as well

export default {
  data () {
    return { project: 'default' }
  },
  asyncData (context) {
    return { project: 'nuxt' }
  }
}

try changing your data to this. Declare default value of cities and categories

      data() {
        return {
          product:{
            cityID:null,
            categoryID:null,
            productname: '',
            cellphone: null,
            licensenumber: null,
            address: '',
            rating: null
          },
          cities: [],
          categories: []
        };
      },

your asyncData return value {cities,categories,product}. But data only return value {product}. As default of data don't have cities value, so cities is undefined when template start rendering.