vue切换class遇到问题，能否不要每个一起切换?

Question

在做一个折叠面板 类似这样

需求是点击标题后会展开 右边下箭头icon也会上切换成上箭头

遇到的问题是 我展开一个 每一个的icon都会一起上下切换....

但我目的是 只要点到的那个切换阿 而不是每一个一起切换...

初学VUE 想问怎么解决这个问题

我的程式长这样(只撷取部分)

<i v-bind:class="{ 'el-icon-arrow-down' : isA, 'el-icon-arrow-up': !isA}" @click="onClick()"></i>

js

data() {
 return {isA: true}
},
methods:{
onClick(inputKey) {this.isA = !this.isA;},
}

Answer 1

怎么都要讲绑定的变量分开，现在是都绑定到一个isA上了，自然是这个结果。
例如改成数组：

<i v-bind:class="{ 'el-icon-arrow-down' : isA[0], 'el-icon-arrow-up': !isA[0]}" @click="onClick(0)"></i>
<i v-bind:class="{ 'el-icon-arrow-down' : isA[1], 'el-icon-arrow-up': !isA[1]}" @click="onClick(1)"></i>
...

data() {
 return {isA: [false,false,false]}
},
methods:{
onClick(index) {this.isA[index] = !this.isA[index];},
}

如有不正之处请谅解指正，谢谢。

Answer 2

你可以给你遍历这个列表的数组中每个对象添加一个属性来绑定class。或者就像上面那样，定义一个等长度的布尔值集合..

Answer 3

我觉得你可以借鉴导航栏高亮的思路