<template>
<div>
<div class="a" v-for="(item,index) in list" :key="index">{{index}}
<div class="b">
<div v-for="(it,ind) in item.bb" :key="ind" @click="clickIndex(ind)">
<span :class="activeIndex==ind?'active':''">{{it.name}}</span>
</div>
</div>
<el-button @click="add(item,index)">{{item.show?'+添加': '-删除'}}</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [{ show: true,bb:[{name:'苹果',id:0},{name: "香蕉",id:1},{ name:"西瓜",id:2}]}],
activeIndex:0,
}
},
methods: {
add(val, index) {
if (val.show) {
if( this.list.length <= 3){
let data = {show: false,bb:[{name:'苹果',id:0},{name: "香蕉",id:1},{ name:"西瓜",id:2}]}
this.list.unshift(JSON.parse(JSON.stringify(data)))
}
} else {
this.list.splice(index, 1)
}
},
clickIndex(idss,index) {
this.activeIndex = idss
}
}
}
</script>
<style lang="scss" scoped>
.a { border: 1px solid #000000; display: inline-block; margin-right: 20px; }
.b { display: flex; border: 1px solid #ff0000; height: 100px; line-height: 100px; text-align: center; margin: 50px; }
.c { border: 1px solid #f0f0f0; }
.active{ color: #ff0000; }
</style>
选香蕉后点击添加,第二个框出来后让它默认选中的是苹果,第一个框中的选中的香蕉不会改变,求解答?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- CSDN专家-showbo 2021-11-03 17:06关注
不能共用一个activeIndex,应该放到list的项中,每个项有自己的activeIndex
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 求差集那个函数有问题,有无佬可以解决
- ¥15 【提问】基于Invest的水源涵养
- ¥20 微信网友居然可以通过vx号找到我绑的手机号
- ¥15 寻一个支付宝扫码远程授权登录的软件助手app
- ¥15 解riccati方程组
- ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
- ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
- ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
- ¥50 树莓派安卓APK系统签名
- ¥65 汇编语言除法溢出问题