【Vue项目复习笔记】商品推荐数据的展示

第一步：先获取数据
在detail.js中创建一个接口

export function getRecommend() {
  return request({
    url: "/recommend",
  });
}

再到详情页将其导入

import {getDetail,Goods,Shop,GoodsParam,getRecommend} from '@/network/detail';

data()里新建变量

 recommends:[],

再到created()里面请求推荐数据

//请求推荐数据
    getRecommend().then(res=>{
      this.recommends=res.data.list
    })

对推荐数据的进行展示：
因为它和我们的GoodsList.vue排版格式类似，所以可以直接使用GoodsList
将我们的GoodsList导入，注册，使用

<goods-list ref="recommend" :goods="recommends"></goods-list>

我们会发现结果报错

根据报错结果我们找到了GoodsListItem里面的img，为其增加一个计算属性

 <img :src="showImage" :key="showImage" alt="" @load="imageLoad" >

做一个判断

  computed:{
    showImage() {
      return this.goodsItem.image || this.goodsItem.show.img;
    },
  }

最终的结果如下：