how i can swap the selected options of two bootstrap-vue multiple select boxes?

Question

how i can swap the selected options of two bootstrap-vue multiple select boxes? i want to implement the UI of the image below. but I don't know how to write the method.

I wrote the template like this.

<template>
  <b-row
    align-v="center"
  >
    <b-col cols="5">
      <b-card header="A Multiple Select" no-body>
        <b-card-body>
          <b-overlay :show="selectedBusyFlag" opacity="0.6">
            <b-form-select
              v-model="inActiveSelected"
              :options="inActiveOptions"
              multiple
            ></b-form-select>
          </b-overlay>
        </b-card-body>
      </b-card>
    </b-col>
    <b-col cols="2">
      <b-row>
        <b-col align="center">
          <b-button
            variant="link"
            class="button-pattern-throw"
            @click="
              moveOptionsToSelect(
                inActiveSelected,
                inActiveOptions,
                activeSelected,
                activeOptions,
                'DIRECTION_001',
              )
            "
          >
            <i class="fas fa-arrow-circle-right"></i>
          </b-button>
        </b-col>
      </b-row>
      <b-row>
        <b-col align="center">
          <b-button
            variant="link"
            class="button-pattern-throw"
            @click="
              moveOptionsToSelect(
                activeSelected,
                activeOptions,
                inActiveSelected,
                inActiveOptions,
                'DIRECTION_002',
              )
            "
          >
            <i class="fas fa-arrow-circle-left"></i>
          </b-button>
        </b-col>
      </b-row>
    </b-col>
    <b-col cols="5">
      <b-card header="B Multiple Select" no-body>
        <b-card-body>
          <b-overlay :show="selectedBusyFlag" opacity="0.6">
            <b-form-select
              v-model="activeSelected"
              :options="activeOptions"
              multiple
            ></b-form-select>
          </b-overlay>
        </b-card-body>
      </b-card>
    </b-col>
  </b-row>
</template>
<script>
...
moveOptionsToSelect(selected1, option1, selected2, option2, direction) {
        const select1Model = selected1;
        const select1Option = option1;
        const select2Model = selected2;
        const select2Option = option2;
        if (direction === 'DIRECTION_001') {
          // select A to select B
        } else if (direction === 'DIRECTION_002') {
          // select B to select A
        }
    },
...
</script>

When I run "moveOptionsToSelect", I divided the branches that run according to the contents of the "direction string", but the work does not proceed after that.

Please Help!

Answer 1

I would use 2 different arrays for the 2 selects. Based on your direction, you could pop from the first array and push to the second one. Note, try to use coy of the options, so it doesn't get modified instant if you choose another option.

Answer 2

i resoved that with this code.

after posting the question, I wrote a new one from the bottom and started thinking about it again. Then I wrote the code and completed it.

I hope this method helps the people who see this question.

    moveOptionsToSelect(direction) {
      let getMovableObjects;
      if (direction === 'LTR') {
        getMovableObjects = this.inActiveOptions.filter(elm =>
          this.inActiveSelected.includes(elm.value),
        );

        this.inActiveOptions = this.inActiveOptions.filter(
          elm => !this.inActiveSelected.includes(elm.value),
        );
        this.inActiveSelected = [];

        this.activeOptions.push(...getMovableObjects);
      }
      else if (direction === 'RTL') {
        getMovableObjects = this.activeOptions.filter(elm =>
          this.activeSelected.includes(elm.value),
        );

        this.activeOptions = this.activeOptions.filter(
          elm => !this.activeSelected.includes(elm.value),
        );
        this.activeSelected = [];

        this.inActiveOptions.push(...getMovableObjects);
      }
    },