Vue尚品汇后台系统实现三级联动平台属性及解决400报错

需求：

1、平台属性有三级分类，我们应该保证点击一级分类后才能获取到二级分类的数据，确认了二级分类后才能获取到三级分类的数据。

2、并且修改完前一级的分类后，后面的分类应该被重置。

3、直到选择了三级分类后再向服务器发请求，获取该分类下的所有平台属性。

需求1:

首先该组件一挂载完毕，先获得一级分类的数据。然后对一级分类绑定change事件，若发生变化，进行事件的回调

    async handler1(){
            // 解构出一级分类的id
            const {category1Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category1Id,level:1});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory2List(category1Id);
            if(result.code==200){
                this.list2 = result.data;
            }
        },

对于二级分类也同样处理。 通过相应的分类ID再获取下一级的分类数据

需求2:

async handler1(){
            // 清除数据
            this.list2 = [];
            this.list3 = [];
            this.cForm.category2Id = '';
            this.cForm.category3Id = '';
            // 解构出一级分类的id
            const {category1Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category1Id,level:1});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory2List(category1Id);
            if(result.code==200){
                this.list2 = result.data;
            }
        },

 在每一次级层数据发生改变时，清空后面几级的数据。 同时传递数据给父组件告知该级别的数据信息（id和层级）

需求3:

        // 一级分类的select事件回调（当一级分类的option发生变化时，获取相应二级分类的数据）
        async handler1(){
            // 清除数据
            this.list2 = [];
            this.list3 = [];
            this.cForm.category2Id = '';
            this.cForm.category3Id = '';
            // 解构出一级分类的id
            const {category1Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category1Id,level:1});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory2List(category1Id);
            if(result.code==200){
                this.list2 = result.data;
            }
        },
        // 二级分类的select事件回调
        async handler2(){
            // 清除数据
            this.list3 = [];
            this.cForm.category3Id = '';
            // 解构出二级分类的id
            const {category2Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category2Id,level:2});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory3List(category2Id);
            if(result.code==200){
                this.list3 = result.data;
            }
        },
        // 三级分类的select事件回调
        handler3(){
            // 解构出三级分类的id
            const {category3Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category3Id,level:3});
        },

同样的，分别对1、2、3级分类做处理，改变该级的分类，向父组件传递相应数据。

父组件.vue

<template>
  <div>
    <el-card style="margin:20px 0px">
      <CategorySelect @getCategoryId="getCategoryId">CategorySelect>
    el-card>
  div>
template>
<script>
data(){
      return {
        category1Id:'',
        category2Id:'',
        category3Id:'',
      }
    },
    methods:{
      // 自定义事件回调
      getCategoryId(categoryId,level){
        if(level==1){
          this.category1Id = categoryId;
          this.category2Id = '';
          this.category3Id = '';
        }else if(level == 2){
          this.category2Id = categoryId;
          this.category3Id = '';
        }else{
          this.category3Id = categoryId;
          // 发请求，获取平台属性
          this.getAttrList();
        }
      },
      // 获取平台属性的数据
      async getAttrList(){
        // 当用户确定三级分类的数据时候，可以向服务器发请求获取平台属性进行展示
        // 获取分类的ID
        const {category1Id,category2Id,category3Id} = this;
        let result = await this.$API.attr.reqAttrList(category1Id,category2Id,category3Id);
        console.log(result);
      }
    }
script>

这里就是通过每一次传递过来的数据，更新父组件相应data，当第三级分类改变时，发送请求给服务器以获得相应层级路径下的平台属性。 （上面代码有bug，导致了400，勿直接复制）

 然后就发现，它报错了。400

看到这种就会很烦，因为要找bug。这里就记录下排错过程吧。

首先想到接口不能用了？ 但是也不是，因为获取三级联动的接口是没问题的，正常返回数据了。

然后又检查了api是不是写错了，发现也没问题。

最后再检查处理的数据对不对，父子组件通信时有没有问题。

这里其实还没开始检查就发现了一点问题，就是上图中我只点了一级分类，但是直接给我返回了400。按照业务的逻辑，应该是三级分类全部完成以后，才发送请求的。所以我初步判定就是父组件里面写的有些问题。

methods:{
      // 自定义事件回调
      getCategoryId(categoryId,level){
        console.log(categoryId,level);
        if(level==1){
          this.category1Id = categoryId;
          this.category2Id = '';
          this.category3Id = '';
          console.log('一级分类');
        }else if(level == 2){
          this.category2Id = categoryId;
          this.category3Id = '';
        }else{
          this.category3Id = categoryId;
          console.log("发请求！");
          // 发请求，获取平台属性
          this.getAttrList();
        }
      },

 首先，进行了三处地方的打印。

这里就发现不对劲了，首先没进入到第一层的if判断中去，其次level也没获取到。立马想到是父子通信时写错了。

 

子组件传递数据时，是传的对象形式，而父组件用了两个参数来接收。 所以第一个参数获取到的是对象，第二个参数是undefined。 所以应该直接解构一下 

 

这样子就没问题了。