Is there a way to switch the selected options between two bootstrap-vue multiple select boxes? I am trying to create a UI similar to the image shown below but I am struggling with writing the method.
This is how I have written the template:
<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>
Even though I have created different paths based on the "direction string" in the "moveOptionsToSelect" function, the execution stops after that point.
I would appreciate any assistance!