Skip to content

Fix 969 add get selected option class #973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

sagalbot
Copy link
Owner

@sagalbot sagalbot commented Oct 26, 2019

It's currently really difficult to add a custom class to the selected-option-container slot. That slot needs to be refactored, and this prop provides a lightweight solution to custom classes for selected options in the meantime.

Edit: Nov 18, 2019

Maybe this should just be getOptionClass, with a selected param provided to the callback. This way the same prop can be used for both situations.


Related #895
Closes #969

@sagalbot sagalbot added this to the v3.3 milestone Oct 26, 2019
@sagalbot sagalbot self-assigned this Oct 26, 2019
@coveralls
Copy link

coveralls commented Oct 26, 2019

Coverage Status

Coverage increased (+0.02%) to 95.814% when pulling 5c9f898 on fix-969-add-get-selected-option-class into 1aef52a on master.

@sagalbot sagalbot removed this from the v3.3 milestone Mar 8, 2020
@McPo
Copy link

McPo commented Nov 3, 2020

Running into this issue now, Is there any update to this draft feature?

My specific use case is are few of the options have an error and I would like to make those options red.

----- Update -----

Actually it wasnt as verbose as I was expecting re-defining the majority of the selected-option-controller

        <template #selected-option-container="{ option, deselect }">
          <div :class="{ 'vs__selected': true, 'error': errors.includes(option.node.id) }">
            {{ option.node.displayName }}
            <button type="button" class="vs__deselect" @click="deselect(option)" >
              <deselect></deselect>
            </button>
          </div>
        </template>
....
    components: {
      vSelect: vSelect,
      Deselect: vSelect.components.Deselect
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Individual class for selected options on multiple select with selected-option-container
3 participants