【Vue项目】面包屑多传了一个空值的数组

背景

如题：在页面刷新加载的时候，就已经存在了一个空值的数组。

思路

这里的传值，是子组件传数据给父组件，所以也是采用自定义事件。

考虑1：

子组件的问题，传的数据源有问题？看下子组件的代码：

<template>
    <ul class="type-list">
          <!-- 平台相应售卖的属性的属性值：粉色、蓝色 -->
          <li v-for="(attrValue,index) in attr.attrValueList" 
                :key="index" 
                @click="attrInfo(attr,attrValue)">
            <a>{{attrValue}}</a>
          </li>
    </ul>
</template>

<script>
methods:{
    attrInfo(attr,attrValue){
        console.log(attr,attrValue);
        this.$emit("attrInfo",attr,attrValue);
      }
}
</script>

父组件的代码：

<template>
    <SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo" />
</template>

<script>
    methods:{
        attrInfo(attr,attrValue){
      // ["属性ID:属性值:属性名"]
      // 参数格式整理好
      console.log('我是父组件',attr.attrId,attrValue,attr.attrName);
      let props = `${attr.attrId}:${attrValue}:${attr.attrName}`;
      // 数组去重
      if(this.searchParams.props.indexOf(props) == -1){
        this.searchParams.props.push(props);
      }
      this.getData();
    },
    }
</script>

 

看了许久，子给父的自定义事件也没有写错呀，不然其他数据也不可能传递过去了。

考虑2：

那么是不是不组件间通信之前，数据就有问题了呢

这样一想，一看date，果然返回data数据写的有问题，data里面的props这个字段，已经有个空得数据了

将props改写成props:[]后，再运行程序，页面果然恢复正常了