我如何交换两个 bootstrap-vue 多个选择框的选定选项？答案

【问题标题】：how i can swap the selected options of two bootstrap-vue multiple select boxes?我如何交换两个 bootstrap-vue 多个选择框的选定选项？
【发布时间】：2021-07-08 07:56:00
【问题描述】：

如何交换两个 bootstrap-vue 多个选择框的选定选项？我想实现下图的 UI。但是我不知道怎么写方法。

我是这样写模板的。

<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>

当我运行“moveOptionsToSelect”时，我根据“方向字符串”的内容划分了运行的分支，但之后工作并没有进行。

请帮忙！

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案1】：

我用这段代码解决了这个问题。

发布问题后，我从底部写了一个新的，并重新开始思考。然后我写了代码，完成了。

希望这个方法对看到这个问题的人有所帮助。

    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);
      }
    },

【讨论】：

【解决方案2】：

我会为 2 个选择使用 2 个不同的数组。根据您的方向，您可以从第一个数组弹出并推送到第二个数组。请注意，尽量使用选项的腼腆，这样如果您选择其他选项，它不会立即被修改。

【讨论】：