vue 点击下拉选项 展示不同的数据

1.想要的结果:

现在的问题是:
点击项目工程,其他的标题也都跟着展示出来了
代码是这么写的

<group v-for="(item, index) in navData" :key="index">
<cell
:title="`${item.title}(${item.size})`"
:border-intent="false"
is-link
:arrow-direction="secondaryNodeShow ? 'up' : 'down'"
@click.native="secondaryNode(item, index)">
</cell>
 <template v-if="secondaryNodeShow"></template>
</group>

在data声明了一个 : secondaryNodeShow: false

secondaryNode (value, index) {
      console.log(value, index)
      this.secondaryNodeShow = !this.secondaryNodeShow
      // 通过点击的title和总的title做筛选 ,如果两个title相等 secondaryNodeShow = true else false
      // this.navData.filter(item => {
      //   // debugger
      //   if (item.title === value.title) {
      //     this.secondaryNodeShow = true
      //   } else {
      //     console.log(item.title)
      //     console.log(value.title)
      //     this.secondaryNodeShow = false
      //   }
      // })
      this.$http.get(`/mrData/list/${this.loginName}/${value.treeId}`, {}, res => {
        console.log(res)
        res.data.forEach(item => {
          item.avatar = this.$imgUrl + item.avatar
        })
        this.secondaryData = res.data
      })
    },

将secondaryNodeShow用数组来存，secondaryNodeShow :[false，true] 遍历判断的时候通过secondaryNodeShow [index]来拿值就可以了

:arrow-direction="secondaryNodeShow[index] ? 'up' : 'down'"

data里声明 secondaryNodeShow:[false,false,false,false],这个长度可以根据数据的长度来写

secondaryNode (value, index) {
      this.secondaryNodeShow[index] = !this.secondaryNodeShow[index]
      // 通过点击的title和总的title做筛选 ,如果两个title相等 secondaryNodeShow = true else false
      this.navData.filter((item,index) => {
      //   // debugger
        if (item.title === value.title) {
          this.secondaryNodeShow[index] = true
        } else {
           console.log(item.title)
          console.log(value.title)
          this.secondaryNodeShow[index] = false
        }
      })
      this.$http.get(`/mrData/list/${this.loginName}/${value.treeId}`, {}, res => {
        console.log(res)
        res.data.forEach(item => {
          item.avatar = this.$imgUrl + item.avatar
        })
        this.secondaryData = res.data
      })
    },

如果secondaryNodeShow是控制展开、收缩面板的，建议放在具体的面板对象里。设置全局secondaryNodeShow的话，因为是公有变量，改变它会影响每一个面板状态。

【Vue 实现改变当前点击Class 样式、改变多个点击Class样式 实例 解析_javascript_Bnana博客-CSDN博客】https://blog.csdn.net/foreverbana/article/details/106301820