百米点购分类页面实现

 

 实现点击不同模块显示不同商品详情：

 

 

首先对后端获得的接口进行封装

 

export function Data() {
    //模板字符串
    return axios.get(`${baseUrl}/biz/queryAllCategory`)
}

export function queryCommodityByCateId(cateld) {
    //模板字符串
    return axios.get(`${baseUrl}/biz/queryCommodityByCateId?cateId=${cateld}`)
}

然后通过异步处理获取传过来的数据并且渲染到页面上

async created() {
    let res = await Data();
    this.arr = res.data.data;
    // console.log(res.data.data);
  },

然后设置一个changeid函数将当前数据的id改变成索引，之后让cateid的值等于改变之后的id，然后设置一个点击事件，点击将当前所点击的索引传给id，然后将获取到的cateid参数传给获取商品详情的api，获取到当前参数对应的数据

<div
          class="btn"
          :class="{ active: index == Id }"
          v-for="(item, index) in arr"
          :key="index"
          @click="changeId(index)"
        >
          {{ item.name }}
        </div>

 methods: {
    changeId(index) {
      this.Id = index;
      
      // console.log(this.arr[index].id);
      this.cateId=this.arr[index].id
    },
    
  },
  async updated(){
    
          //  console.log(this.cateId);
            let res=await queryCommodityByCateId(this.cateId);
            // console.log(res.data);
            this.img=res.data.data;
        },
};