I am trying to use vue-next-select with multiple and taggable (i want to display the s

I think the problem is here <div class="snippet-clipboard-content notranslate posi

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

multiple with tags appears all as tags (not the selected ones) about vue-next-select HOT 4 CLOSED

iendeavor commented on June 15, 2024

multiple with tags appears all as tags (not the selected ones)

from vue-next-select.

Comments (4)

bci24 commented on June 15, 2024 1

I think the problem is here

.vue-tag, .vue-tag.selected {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #999;
    border-radius: 4px;
    padding: 0 4px;
    font-size: .8rem;
}

it should be

.vue-tag.selected {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #999;
    border-radius: 4px;
    padding: 0 4px;
    font-size: .8rem;
}

without

.vue-tag,

from vue-next-select.

soc221b commented on June 15, 2024 1

@bci24 Thanks for lot of detail, It works now~

from vue-next-select.

soc221b commented on June 15, 2024

I create a minimal demo for your case, it seems to work fine.

Maybe you can check the tags' class:

for selected tags:

<li class="vue-tag selected">...</li>

for non-selected tags:

<li class="vue-tag">...</li>

https://codesandbox.io/s/vue-next-select-forked-c26uh?file=/src/App.vue

from vue-next-select.

bci24 commented on June 15, 2024

I cleared all the custom style made for vue-select and load only the index.min.css

// vue-next-select scss
@import '~vue-next-select/dist/index.min.css';
``
I was thinking that I did something wrong in css 

As you can see in the pictures attached, all the 8 items appears in the select

You can see that 1 and 4 appears as selected (with class="vue-tag selected")

but... I click on "vue-tag" it still has the css display:flex (instead of none)

I think is an issue in the css (index.min.css)

![Screenshot from 2020-12-08 13-38-22](https://user-images.githubusercontent.com/49674076/101479953-ad770e00-395b-11eb-90cc-f2988f2e88ba.png)
![Screenshot from 2020-12-08 13-38-41](https://user-images.githubusercontent.com/49674076/101479957-ae0fa480-395b-11eb-8ca8-aa4d501f8978.png)
![Screenshot from 2020-12-08 13-39-11](https://user-images.githubusercontent.com/49674076/101479959-ae0fa480-395b-11eb-8ee8-00ae1bc117f5.png)
![Screenshot from 2020-12-08 13-39-22](https://user-images.githubusercontent.com/49674076/101479962-aea83b00-395b-11eb-9918-3ee8c0e72acd.png)

from vue-next-select.

Recommend Projects