vue-multiselect

WebJar for vue-multiselect

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-shentao-vue-multiselect
Last Version

Last Version

2.1.6
Release Date

Release Date

Type

Type

jar
Description

Description

vue-multiselect
WebJar for vue-multiselect
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/shentao/vue-multiselect

Download github-com-shentao-vue-multiselect

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-shentao-vue-multiselect/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-shentao-vue-multiselect</artifactId>
    <version>2.1.6</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-shentao-vue-multiselect/
implementation 'org.webjars.npm:github-com-shentao-vue-multiselect:2.1.6'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-shentao-vue-multiselect/
implementation ("org.webjars.npm:github-com-shentao-vue-multiselect:2.1.6")
'org.webjars.npm:github-com-shentao-vue-multiselect:jar:2.1.6'
<dependency org="org.webjars.npm" name="github-com-shentao-vue-multiselect" rev="2.1.6">
  <artifact name="github-com-shentao-vue-multiselect" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-shentao-vue-multiselect', version='2.1.6')
)
libraryDependencies += "org.webjars.npm" % "github-com-shentao-vue-multiselect" % "2.1.6"
[org.webjars.npm/github-com-shentao-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 Build StatusCodecov branchnpm

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

Vue-Multiselect Screen

Documentation

Visit: vue-multiselect.js.org

Sponsors

Gold

Storyblok

Silver

Storyblok

Bronze

Vue Mastery logo

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