CODEWITHSUNDEEP
javascriptvue.js
Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

Dynamic classes in V-for accordion

I'm making accordion with data fetched with 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>

Then i have method:

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

}

But on clicking on any accordion element all elements switch icon style. I want all accordion elements to have (at start) 'cap-icon ci-arrow-down' style, and only active element to change style to 'cap-icon ci-arrow-up'.

How can I switch icons only on selected element?

Upvotes: 0

Views: 175

Answers (1)

Konrad Słotwiński
Konrad Słotwiński

Reputation: 699

If you need to change icons for certain accordion then assign somewhere selected accordion key/id for icon style conditions.

On click assign id to data property:

onAccor(id) {
      this.clicked1 = id
}

And modify condition that changes icon:

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

Only icons of selected accordion should now have class cap-icon ci-arrow-down.

Upvotes: 2

Related Questions