Search code examples
javascriptvuejs2vue-multiselect

Vue multiselect slots caret dropdown option show and hide

<v-multiselect
      ref="tagMultiselect"
      v-model="sort"
      :options="sorts"
      class="filter"
    >
      <span
        slot="caret"
        slot-scope="{ toggle }"
        class="arrow"
        @mousedown.prevent.stop="toggle"
      >
        <font-awesome-icon
          class="icon"
          icon="chevron-down"
        />
      </span>
    </v-multiselect>

I just want to change caret to chevron up when dropdown options show.

Thank you in advance.

Solution

  • They use the class multiselect--active, all you need to do is use that and add a transform on it (again, the same as them)

    .multiselect--active .icon {
    transform: rotate(180deg);
}