Multiple VueSelect

Question

I am obtaining from an API the data to fill a v-select type component, the component is filled correctly and I also obtain the options that the user already had assigned (multiple)

And the v-select component are filled correctly

But when i try to add another option occurs the next

Here is the Source Code

<validation-provider
        #default="validationContext"
        name="skill"
      >
        <b-form-group
          label="Skills"
          label-for="skill_id"
          :state="getValidationState(validationContext)"
        >
          <v-select
            v-model="itemData.skills"
            :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
            multiple
            :options="skillOptions"
            :clearable="false"
            :reduce="(val) => val.value"
            input-id="skill_id"
          />
          <b-form-invalid-feedback
            :state="getValidationState(validationContext)"
          >
            {{ validationContext.errors[0] }}
          </b-form-invalid-feedback>
        </b-form-group>
      </validation-provider>

Here i have the array of objects, with multiple elements

itemEdit.value.skills

Then map to get a reduced array with only the value and label

I have probed using only the label without value and the result is the same

const openEdit = item => {
  isSidebarActive.value = true
  itemEdit.value = item
  itemEdit.value.skills = item.skills.map(skill => ({
    value: skill.id,
    label: skill.skill,
  }))
  isAdd.value = false
}

Everything apparently goes right, the v-model match correctly with the available options, the problem comes when the user interact with the vSelect to add another item, the already selected items disappear

Thanks in advance

Answer 1

thanks for listen, the problem was solved removing:

:reduce="(val) => val.value"

From

<v-select
            v-model="itemData.skills"
            :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
            multiple
            :options="skillOptions"
            :clearable="false"
            :reduce="(val) => val.value"
            input-id="skill_id"
          />