在最近的工作中,我遇到这样一个需求,给商品加规格信息,而这个规格信息是自定义的,在后端传给我时,时一个二维的对象数组,像下面这样,在后台是可以设置很多的规格信息的,规格里面又能设置很多数值,然后需要我在前端实现购买时对规格的选择。
js
spec_list=[
{
id: 1,
name: '颜色',
list:[
{id:11,value:'a'},
{id:12,value:'b'},
{id:13,value:'c'},
]
},
{
id: 2,
name: '尺寸',
list:[
{id:21,value:'1'},
{id:22,value:'2'},
{id:23,value:'3'},
]
},
]
一开始就觉得不就是循环嘛,简单v-for给我循环!
uniapp
<view class="popup_goodsDesc---item" v-for="(item, indexOut) in goodsInfo.spec_list" :key="item.id">
<view class="desc_name">{{ item.spec_name }} :</view>
<view class="desc_value">
<view class="value-item" v-for="(e, itemIndex) in item.value_list" :key="e.id">
{{ e.spec_value }}
</view>
</view>
</view>
渲染是渲染出来了,但是当我去写"active"点击样式时,突然发现没有效果,我检查了我的代码,我觉得应该没有什么问题吧,还给ai分析了一下,也没啥问题,就在我百思不得其解时,我才意识到这是一个二维数组,而且这个项目是一个vue2项目。它真的,我哭死!因为这是算我接手的项目,好像原项目中除了uni-ui没用其他ui组件库,所以我就想着自己想个办法来把效果实现出来。
嘿!还真被我搞出来了,虽略显拙劣,但也有点用处。叫后端大哥给每个list数组中的每个元素加了一个checked属性,然后用了map来对其点击的规格属性进行选中,
uniapp
<view class="popup_goodsDesc---item" v-for="(item, indexOut) in goodsInfo.spec_list" :key="item.id">
<view class="desc_name">{{ item.spec_name }} :</view>
<view class="desc_value">
<view class="value-item" v-for="(e, itemIndex) in item.value_list" :class="{ active: e.checked }" :key="e.id" @click="getValue(e.id, item.id)">
{{ e.spec_value }}
</view>
</view>
</view>
getValue(inId, outId) {
//this.infoList 就是那个后端给我的spec_list数据
this.infoList.map((outItem, outIndex) => {
//找到点击的外层id
if (outItem.id === outId) {
return outItem.value_list.map((item, index) => {
//再找到内层的id,相同则checked为true,不同则false,初始默认都是false
if (item.id === inId) {
return (item.checked = true);
} else {
return (item.checked = false);
}
});
}
});
}
选中效果,这样不同规格的选中不会互相干扰,每一个规格信息只能选中一个数值,这样就挺好。
over!完结
有个问题
其实我写完之后,在想,就是不用组件,不重写vue2对数组的监听的话,还有其他的方法实现吗?我觉得我的这个方法比较笨拙,哈哈哈哈哈!希望有大佬教教我这个刚工作不久的前端开发!