How to arrow toggle up and down? Vue

Question

How do I change the up and down arrow icon at a click? I want to click to activate up or down class.

<div class="base-box base-box__accordion-sec"  @click="arrowToggle()">
<i   class="arrow down"> </i>
</div>


isToggled: false


arrowToggle(event) {
this.isToggled = !this.isToggled;
}

.down {
  transform: rotate(45deg);
}
.up {
  transform: rotate(-135deg);
}

Answer 1

<i v-bind:class="{ 'down': isToggled, 'up': !isToggled }" class="arrow"> </i>

https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 2

<template>
  <div>
    <div v-for="item in items">
      <div @click="item.isToggle = !item.isToggle>
        <i :class="{ 'down': item.isToggled }" class="arrow"> </i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: []
    }
  },
  mounted () {
    const itemsFromApi = [ ... ]
    this.items = itemsFromApi.map(item => {
      item.isToggle = false
      return item
    })
  }
}
</script>

<style>
.arrow {
  transform: rotate(-135deg);
}
.arrow.down {
  transform: rotate(45deg);
}
</style>