老街一角 2021-11-03 16:56 采纳率: 68.8%
浏览 47
已结题

选香蕉后点击添加,第二个框出来后让它默认选中的是苹果,第一个框中的选中的香蕉不会改变,求解答?

img

<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>


  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-11-03 17:06
    关注

    不能共用一个activeIndex,应该放到list的项中,每个项有自己的activeIndex

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月8日
  • 已采纳回答 11月3日
  • 创建了问题 11月3日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题