css略，點擊牛仔褲添加到已選條件，點擊x取消選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
<div
class="goods"
v-for = "(goods,goodsIndex) in goodsList"
:key = "goods.id"
>
<div class="title">{{ goods.title }}:</div>
<ul class="type-list">
<li class="type"
:class = "{
active:typeIndex === goods.index
}"
v-for = "(type,typeIndex) in goods.typeList"
:key = "type"
@click = "handleclick(typeIndex,goods,type,goodsIndex)"
>{{ type }}</li>
</ul>
</div>
<div
class="choose-type"
>
<div>已選條件</div>
<span class="no-goods"
v-if = "!showFiltergoods"
>暫時沒有商品</span>
<ul class="filter-list"
v-else
>
<li v-for = "(goods,goodsKey) in filterList">{{ goods }}
<span class="delete-goods"
@click = "deleteFilterGoods(goodsKey)"
>x</span>
</li>
</ul>
</div>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
filterList:{},
showFiltergoods:false,
goodsList: [
{
title: '上裝',
typeList: ['全部', '針織衫', '毛呢外套', 'T恤', '羽絨服', '棉衣', '衛衣', '風衣' ],
id: 1,
},
{
title: '褲裝',
typeList: ['全部', '牛仔褲', '小腳/鉛筆褲', '休閒褲' ,'打底褲', '哈倫褲'],
id: 2,
},
{
title: '裙裝',
typeList: ['全部', '連衣裙', '半身裙', '長袖連衣裙', '中長款連衣裙'],
id: 3,
}
]
},
methods:{
handleclick(typeIndex,goods,type,goodsIndex){
if(type === "全部"){
return;
}
this.showFiltergoods = true;
goods.index = typeIndex;
// this.filterList.splice(goodsIndex,1,type);
vm.$set(this.filterList,goodsIndex,type)
},
deleteFilterGoods(goodsKey){
// this.filterList
this.$delete(this.filterList,goodsKey);
this.goodsList[goodsKey].index = 0;
this.changeShowFilter();
},
changeShowFilter(){
const filterListStr =JSON.stringfy(this.filterList);
this.showFiltergoods=filterListStr !== "{}"
}
}
})
vm.goodsList.forEach(item => vm.$set(item,'index',0));
</script>
</body>
</html>