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

Question

在做一个折叠面板 类似这样需求是点击标题后会展开 右边下箭头icon也会上切换成上箭头遇到的问题是 我展开一个 每一个的icon都会一起上下切换....但我目的是 只要点到的那个切换阿 而不是每一个一起切换...初学VUE 想问怎么解决这个问题我的程式长这样(只撷取部分)<i v-bind:class="{ 'el-icon-arrow-down' : isA, 'el-icon-arrow-up': !isA}" @click="onClick()"></i>jsdata() { 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

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