ToeList.vue

<template>
  <div class="dropdown">
    <button
      class="btn btn-primary dropdown-toggle"
      type="button"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      {{ initSelectedToe.name }}
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li
        v-for="toe in toeList"
        :key="toe.toeId"
        :class="disabled(toe)"
        @click="setToeTree(toe)"
        class="dropdown-item"
      >
        <a>{{ toe.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ToeList",
  props: ["toeList", "initSelectedToe"],
  data: function () {
    return {
      disabled(toe) {
        if (toe.toeId === this.initSelectedToe.targetOfEvaluationId) {
          return "disabled";
        }
        return "";
      },
    };
  },
  methods: {
    setToeTree(toe) {
      this.$store.dispatch("selectToe", toe.toeId);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/_variables.scss";

.toe-list {
  .dropdown-toggle {
    max-width: 100%;
    padding: 6px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dropdown-item {
    cursor: pointer;
  }

  .disabled {
    pointer-events: none;
    opacity: 0.6;
  }
}
</style>