Vue_shop学习87：商品分类页面数据的获取

最新推荐文章于 2024-04-06 02:12:08 发布

¡Venceremo

最新推荐文章于 2024-04-06 02:12:08 发布

阅读量160

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue_shop 文章标签：学习

本文链接：https://blog.youkuaiyun.com/weixin_47295886/article/details/130474473

Vue_shop 专栏收录该内容

93 篇文章

订阅专栏

该文章描述了一个Vue.js组件的数据结构，用于展示商品的不同级别分类。在组件创建时，它通过HTTPGET请求获取类别数据，特别是针对三级分类。每页显示5条数据，并处理了请求失败的情况。同时，文章还涉及到数据总量的计算和页面状态的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同级别的分类

 export default{
        data() {
            return {
                cateList:[],//商品分类的数据列表 默认为空
                queryInfo:{//查询条件
                    type:3,//3级分类
                    pagenum:1,//当前页码值
                    pagesize:5//每页显示5条数据
                },
                total:0,//总数据条数

                
            }
        },
        created() {//一开始进行获取数据
            this.getCateList()//获取商品信息
            
        },
        methods: {
            async getCateList(){//获取商品分类数据-涉及分页 查询条件
                const{data:res}=await this.$http.get('categories',{params:this.queryInfo})
                if(res.meta.status!==200) return this.$message.error('获取商品分类数据失败')
                //console.log(res.data) 测试
                this.cateList=res.data.result//将商品分类数据赋值给cateList
                this.total=res.data.total//为总数据条数赋值
            }
            
        },
    }