Vue项目中常见问题(28)平台售卖属性的操作

最新推荐文章于 2024-10-18 15:58:53 发布

学无止境QAQ

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量204

点赞数

分类专栏： vue前台管理项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46368050/article/details/124837967

版权

vue前台管理项目专栏收录该内容

83 篇文章 35 订阅

订阅专栏

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

业务需求:

分析:

步骤:

1.首先找到对应的平台售卖属性的结构的位置

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求:

当我们点击售卖属性的时候,面包屑也会显示对应的信息,删除面包屑也会更新

分析:

平台售卖属性也是在search的子组件中的,我们应该点击售卖属性的时候,把属性的信息传递给父组件,然后父组件还是整理参数,发请求,展示新的数据

步骤:

在pages/Search/SearchSelector

1.首先找到对应的平台售卖属性的结构的位置

2.绑定点击事件

因为我们是对售卖的属性的属性值,进行点击的,所以我们对属性值绑定点击事件

3.书写事件函数

测试效果:

4.传参

点击子组件会把平台售卖属性ID和属性名得到,还差属性值没有

属性值在下面这个数组中

所以我们把attr和attrValue当做参数传递给下面的函数

由于还是子给父通信

我们回到父组件,在父组件中绑定一个自定义事件,用于接收子组件传递过来的参数

在子组件中:传递参数

在父组件中接收参数并测试一下

发现属性值,属性名,属性ID都可以拿到

在父组件中,这样写:

效果:

当我们点击售卖属性后,Search父组件中的searchParams中的props里面有了对应的数据

再次发请求,页面能随着点击的内容而更新

     //收集平台属性的回调函数(自定义事件)
      attrInfo(attr,attrValue){
        //["属性ID:属性值:属性名"]
        console.log(attr,attrValue)
        //整理参数格式
        let props = `${attr.attrId}:${attrValue}:${attr.attrName}`
        this.searchParams.props.push(props)
        //再次发请求
        this.getData()
      }

5.面包屑一起更新

因为这里的情况特殊一点,这props是一个数组,数组里面元素多了,展示的也很多,所以我们不能用v-if了,我们要用v-for遍历数组了

在父组件Search中这样写

可以是可以,但是有一个bug

那为什么会出现这种情况呢?

那是因为数组里面的元素有重复的,我们重复的不应该要了

数组去重来了

在pages/Search中

index.Of()=-1表示对应括号中的数组,在数据this.searchParams.props中不存在,那么这句判断就可以这样解读,如果我传入的参数props在数据this.searchParams.props中不存在,那么久把参数props传给数据this.searchParams.props