shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://vue-multiselect.js.org/
MIT License
6.66k stars 991 forks source link

on vue3 repo multiselect is always shows as taggable #1718

Closed mojv closed 11 months ago

mojv commented 11 months ago

with the Vue3 when doing the normal multiselect exmple, it always display it has tags

I'm Using this example from the docs

<template>
  <multiselect
      v-model="value"
      :options="[
              { name: 'Vue.js', language: 'JavaScript' },
              { name: 'Adonis', language: 'JavaScript' },
              { name: 'Rails', language: 'Ruby' },
              { name: 'Sinatra', language: 'Ruby' },
              { name: 'Laravel', language: 'PHP' },
              { name: 'Phoenix', language: 'Elixir' }
            ]"
      :multiple="true"
      :close-on-select="false"
      :clear-on-select="false"
      :preserve-search="true"
      placeholder="Pick some"
      label="name"
      track-by="name"
      :preselect-first="true">
  </multiselect>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: {Multiselect},
  data() {
    return {
      value: [],
      options: [
        {name: 'Vue.js', language: 'JavaScript'},
        {name: 'Adonis', language: 'JavaScript'},
        {name: 'Rails', language: 'Ruby'},
        {name: 'Sinatra', language: 'Ruby'},
        {name: 'Laravel', language: 'PHP'},
        {name: 'Phoenix', language: 'Elixir'}
      ]
    }
  },
};
</script>

I get this view even adding :taggable="false"

image

in my package.json i added "vue-multiselect": "^3.0.0-beta.2",

and this is my yarn lock

vue-multiselect@^3.0.0-beta.2:
  version "3.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/vue-multiselect/-/vue-multiselect-3.0.0-beta.2.tgz#dcfc1f8bc5bff78d85d516bfd71339fce49be97a"
  integrity sha512-TFVHtI/KdWoD3Opzbkso8OIqkZlZEqFF7f2jlYx1ttgC4Jv/48IGlU5zn6cBR4p2bFDFGCHF5SkLCaadLhnBPQ==
GitHubHubus commented 11 months ago

@mojv I have the same problem. Did you find the solution?

mojv commented 11 months ago

Is not a problem, I just didn't realise that vue-multiselect component work with a slot which default are the tags, and you can replace those tags by overriding the slot like this:

  <multiselect
      v-model="value"
      :options="[
              { name: 'Vue.js', language: 'JavaScript' },
              { name: 'Adonis', language: 'JavaScript' },
              { name: 'Rails', language: 'Ruby' },
              { name: 'Sinatra', language: 'Ruby' },
              { name: 'Laravel', language: 'PHP' },
              { name: 'Phoenix', language: 'Elixir' }
            ]"
      :multiple="true"
      :close-on-select="false"
      :clear-on-select="false"
      :preserve-search="true"
      placeholder="Pick some"
      label="name"
      track-by="name"
      :preselect-first="true">
    <template v-slot:selection><span class="multiselect__single" v-if="value.length">{{ value.length }} options selected</span></template>
</multiselect>
GitHubHubus commented 11 months ago

@mojv Work for me, too. Thank you so much!