vue-multiselect

WebJar for vue-multiselect

License	MIT
GroupId	org.webjars.npm
ArtifactId	vue-multiselect
Last Version	2.1.6
Release Date	Aug 7, 2019
Type	jar
Description	vue-multiselect WebJar for vue-multiselect
Project URL	http://webjars.org
Source Code Management	https://github.com/shentao/vue-multiselect

Download vue-multiselect

Filename	Size
vue-multiselect-2.1.6.pom
vue-multiselect-2.1.6.jar	32 KB
vue-multiselect-2.1.6-sources.jar	22 bytes
vue-multiselect-2.1.6-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-multiselect/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-multiselect</artifactId>
    <version>2.1.6</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/vue-multiselect/
implementation 'org.webjars.npm:vue-multiselect:2.1.6'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/vue-multiselect/
implementation ("org.webjars.npm:vue-multiselect:2.1.6")

Apache Buildr

'org.webjars.npm:vue-multiselect:jar:2.1.6'

Apache Ivy

<dependency org="org.webjars.npm" name="vue-multiselect" rev="2.1.6">
  <artifact name="vue-multiselect" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='vue-multiselect', version='2.1.6')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "vue-multiselect" % "2.1.6"

Leiningen

[org.webjars.npm/vue-multiselect "2.1.6"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

vue-multiselect

Probably the most complete selecting solution for Vue.js 2.0, without jQuery.

Documentation

Visit: vue-multiselect.js.org

Sponsors

Silver

Bronze

Features & characteristics:

• NO dependencies
• Single select
• Multiple select
• Tagging
• Dropdowns
• Filtering
• Search with suggestions
• Logic split into mixins
• Basic component and support for custom components
• V-model support
• Vuex support
• Async options support
• > 95% test coverage
• Fully configurable (see props list below)

Breaking changes:

• Instead of Vue.partial for custom option templates you can use a custom render function.
• The :key props has changed to :track-by, due to conflicts with Vue 2.0.
• Support for v-model
• @update has changed to @input to also work with v-model
• :selected has changed to :value for the same reason
• Browserify users: if you wish to import .vue files, please add vueify transform.

Install & basic usage

npm install vue-multiselect

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        selected: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

JSFiddle

Example JSFiddle – Use this for issue reproduction.

Examples

in jade-lang/pug-lang

Single select / dropdown

multiselect(
  :value="value",
  :options="source",
  :searchable="false",
  :close-on-select="false",
  :allow-empty="false",
  @input="updateSelected",
  label="name",
  placeholder="Select one",
  track-by="name"
)

Single select with search

multiselect(
  v-model="value",
  :options="source",
  :close-on-select="true",
  :clear-on-select="false",
  placeholder="Select one",
  label="name",
  track-by="name"
)

Multiple select with search

multiselect(
  v-model="multiValue",
  :options="source",
  :multiple="true",
  :close-on-select="true",
  placeholder="Pick some",
  label="name",
  track-by="name"
)

Tagging

with @tag event

multiselect(
  v-model="taggingSelected",
  :options="taggingOptions",
  :multiple="true",
  :taggable="true",
  @tag="addTag",
  tag-placeholder="Add this as new tag",
  placeholder="Type to search or add tag",
  label="name",
  track-by="code"
)

addTag (newTag) {
  const tag = {
    name: newTag,
    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
  }
  this.taggingOptions.push(tag)
  this.taggingSelected.push(tag)
},

Asynchronous dropdown

multiselect(
  v-model="selectedCountries",
  :options="countries",
  :multiple="multiple",
  :searchable="searchable",
  @search-change="asyncFind",
  placeholder="Type to search",
  label="name"
  track-by="code"
)
  span(slot="noResult").
    Oops! No elements found. Consider changing the search query.

methods: {
  asyncFind (query) {
    this.countries = findService(query)
  }
}

Contributing

# serve with hot reload at localhost:8080
npm run dev

# distribution build with minification
npm run bundle

# build the documentation into docs
npm run docs

# run unit tests
npm run test

# run unit tests watch
npm run unit

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Versions

Version
2.1.6 Aug 7, 2019
2.0.2 Jul 5, 2017
2.0.0-beta.15 Mar 21, 2017