Treeview. Expand/collapse icon

Question

There is an example: https://codepen.io/wildhart/pen/oroQpo

How can I make the icon change when expand/collapse node?

Answer 1

You can use a condition based on open prop:

<v-treeview :items="items" transition="true">
  <template v-slot:prepend="{ item, open }">
    <i v-if="item.children" aria-hidden="true" ...your classes & styles>
      {{ open ? 'arrow_drop_up' : 'arrow_drop_down' }}
    </i>
  </template>
</v-treeview>