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

CodePudding user response：

Based on this page o the Vue Select Documentation, the reduce prop is usually meant for use with a label prop, and is only needed if you provide an object to v-select.

I suspect you are providing an array of primitives in your v-model (ie itemData.skills is an array of strings) instead of an array of objects. If it is an array of objects instead, then I suspect you either don't have a [label] key on the object (the default that label is set to), or you don't have a [value] key (what you are trying to return with your reduce prop).

Ideally, you would give us an example of your data coming in for us to be able to help you better.

CodePudding user response：

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