To show the state (open or closed) of a Bootstrap-vue Collapse component with an arrow indicating whether it’s expanded or collapsed, we can use some CSS and Vue.js to dynamically apply classes to the arrow element based on the collapse state.

For instance we write:

<template>
  <div>
    <b-button v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-button>
    <b-collapse id="collapse1" v-model="isOpen">
      <div class="collapse-content">
        <!-- Our content here -->
      </div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  }
};
</script>

<style>
.collapse-arrow {
  transition: transform 0.3s ease;
}
.collapse-arrow.collapsed {
  transform: rotate(-90deg);
}
</style>

In this example we’re using Bootstrap-vue’s Collapse component to toggle the visibility of content.

The collapse arrow is implemented using CSS and Vue.js to apply a rotation when the collapse is open or closed.

The v-b-toggle directive on the button toggles the visibility of the collapse.

The v-model directive on the collapse binds its visibility state to the isOpen data property.

We can customize the arrow styling and animation according to our design preferences. Adjust the classes and styles as needed to match our application’s design.