如何在vue js中使用axios挂载对象数据

Question

这是我的菜单页：

  <div  class="col col-md-3" v-for="(product, index) in products" :key="index">
            <div class="card">
            <div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"
                data-mdb-ripple-color="light" >
                <img src="" class="w-80" />
            </div>
            <div class="card-body">
                <!--view product link-->
                <router-link :to="{name: 'viewitems', params: { id: product.itemID }}">
                <h5 class="card-title mb-3">{{ product.itemName  }} </h5>
                </router-link>

                <h5 style="font-weight: bolder;" class="mb-3">{{ product.price  }} $</h5>
                <p><button>Add to Cart</button></p>
            </div>
            </div>
        </div>

我的router.js

 //to view menu item :id
  {
    path: '/ViewDetails/:id',
    name: 'viewitems',
    component: ViewItemDetails
  },

虽然我可以转到产品详细信息页面，但我在如何将该产品的数据安装到产品视图页面上遇到了麻烦。

 <div class="container" v-if="product">
        <div class="card" >
            <div class="container-fliud">
                <div class="wrapper row">
                <!--image-->
                    
                <!--Detail-->
                    <div class="details col-md-6">
                        <!--item name-->
                        <h2 class="product-title">{{product.itemName }}</h2>
                        <!--item description-->
                        <p class="product-description">{{product.description}}</p>
                   </div>
           </div>
 </div>
//this is script
props:['id'],

  data() {
    return{
        product:null
    //product: menuItems.find(product => product.itemID == this.$route.params.itemID  ),
    }
  },
  created(){
    this.fetchProductDetail();
  },
  methods:{
    fetchProductDetail(){
            axios.get(`https://localhost:44345/api/MenuItemModels/${this.id}`)
            .then(res =>{
                this.product = res.data;
                
               })
                .catch(error => {
                    console.error("fetch product detail error!", error);
                })
        },
  }

我尝试运行该代码，但不断收到此错误：*
AxiosError {消息：'请求失败，状态代码 400'，名称：'AxiosError'，代码：'ERR_BAD_REQUEST'，配置：{...}，请求：XMLHttpRequest，...}*

Answer 1

export default {
name: "viewproduct",
components:{
    Footer, Navbar
},
 //props:['itemID'],
  data() {
     return{
        id: this.$route.params.itemID,
        product:{}
    } },
    created(){
        this.fetchProductDetail()
    },
    methods:{
     fetchProductDetail(){
       // const id = this.$route.params.ItemID
            axios.get(`https://localhost:7067/api/MenuItemModels/${this.itemID }`)
             .then(res =>{
                 this.product = res.data;
                 console.log(this.product)
                
               })
                 .catch(error => {
                     console.error("fetch product detail error!", error);
                 })
       },
 },  
}

这是我获取产品详细信息的方法。