Question

我正在用axios提取的数据制作手风琴。

<div id="accordion" :key="about.id" v-for="about in allAbouts">
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">
        <div :href="'#collapse' + about.id" data-toggle="collapse" data-parent="#accordion" class="accor"  @click="onAccor(about.id)">
          <i :class="{'cap-icon ci-arrow-down': clicked1 === false, 'cap-icon ci-arrow-up': clicked1 === true}"></i>  {{about.caption}}
      </div>
    </h5>
  </div>

  <div :id="'collapse' + about.id" class="collapse">
    <div class="card-body" v-html="about.description"></div>
  </div>
</div>

然后我有方法：

onAccor(id) {
      this.clicked1 = !this.clicked1

}

但是在单击任何手风琴元素时，所有元素都会切换图标样式。我希望所有手风琴元素都具有（开始时）“ cap-icon ci-arrow-down”风格，并且只有活动元素才能将样式更改为“ cap-icon ci-arrow-up”。

如何仅在所选元素上切换图标？

Answer 1

如果您需要更改某些手风琴的图标，则为图标样式条件分配一个选定的手风琴键/ id。

在单击时，将id分配给数据属性：

onAccor(id) {
      this.clicked1 = id
}

并修改更改图标的条件：

<i :class="{'cap-icon ci-arrow-down': clicked1 === about.id, 'cap-icon ci-arrow-up': clicked1 !== about.id}"></i>

现在只有选定的手风琴的图标应该具有cap-icon ci-arrow-down类。

V-for手风琴中的动态类

1 个答案: