v2.0.0-beta.9

New

• Added options-limit prop (expecting a number) that limits the visible options to the first x matching results. By default, the options-limit is set to 1000. This should provide a simple way to improve performance by reducing the number of options rendered. (same as in 1.x)

v2.0.0-beta.8

New:

• Support for v-model based on Form-Input-Components-using-Custom-Events
• CustomLabel function can be applied to both primitives and objects
• LocalSearch prop, to enable local filtering. Disabling it might be useful if you have async search. Default is true.

Breaking changes:

• Instead of Vue.partial for custom option templates you can use a custom render function.
• The :key prop has changed to :track-by, due to conflicts with Vue 2.0.
• @update has changed to @input to also work with v-model
• :selected has changed to :value for the same reason

If your @update handler was only assigning the new value to the model, like for example:

onChange (newVal) {
  this.selected = newVal
}

you can safely change it to just v-model="selected".

v1.1.4

Fix

• #117

New

• #119 customLabel now works on primitive options

Technically it’s not a breaking change but...

If you start seeing [object Object] instead of labels read this:
Previously (for objects list) if label prop was not present, the label calculating method was using option.label as a fallback for creating labels. This is no longer true. This behavior was not documented. If your options are objects, make sure you pass the correct label prop as stated in the docs!

v1.1.3

New

• #102 tab key now selects the hovered option and skips to the next focusable element.
• #94 Added options-limit prop (expecting a number) that limits the visible options to the first x matching results. By default, the options-limit is set to 1000. This should provide a simple way to improve performance by reducing the number of options rendered.

Fixes

• #93
• #101
• #100
• #88

v1.1.2

New

• #79 Introduced :local-search prop, that when set to false disables the local filtering based on search query. Useful for async searches, where you want to show all the returned options.

Fixes

• Fixed regression coming from 1.1.0 (not showing highlight labels).

v1.1.1

Fixed:

#78 Doesn’t include Vue in the bundle.

v1.1.0

New:

#77 Introduce support for custom option’s template.

Example from the README:

Using Vue’s partial API

multiselect(
  :options="styleList",
  :selected="selectedStyle",
  :option-height="130",
  :custom-label="styleLabel",
  @update="updateSelectedStyle",
  option-partial="customOptionPartial"
  placeholder="Fav No Man’s Sky path"
  label="title"
  key="title"
)

import customOptionPartial from './partials/customOptionPartial.html'
Vue.partial('customOptionPartial', customOptionPartial)

// ...Inside Vue component
methods: {
  styleLabel ({ title, desc }) {
    return `${title} – ${desc}`
  },
  updateSelectedStyle (style) {
    this.selectedStyle = style
  }
}

<div>
  <img class="option__image" :src="option.img" alt="No Man’s Sky" />
  <div class="option__desc">
    <span class="option__title">{{ option.title }}</span>
    <span class="option__small">
      {{ option.desc }}
    </span>
  </div>
</div>

v1.0.1

• Fix problem with exporting deepClone utils function

v1.0.0

New

• Added id prop, which is now passed along all events and can be used to identify which instance emitted the event.
• API is now events based:
  • @update – called after each change, passes the value and id
  • @select – called after selecting an element, passes the selectedOption and id
  • @remove – called after removing an element, passes the removedOption and id
  • @open – called after opening the dropdown, passes the id
  • @close – called after closing the dropdown, passes the value and id
  • @tag – called after attempting to create a tag, passes the searchQuery and id
  • @search-change – called after the search query changes, passes the searchQuery and id
• The deepClone function is now available as import import { deepClone } from 'vue-multiselect'
• Added loading prop, which shows/hides the spinner
• Added disabled prop, which disables the component if true
• The selected prop is no longer required

Breaking Changes

• Two-way binding is deprecated. Please do NOT use .sync anymore. Vue-Multiselect will never change anything outside of its own scope.
• To propagate changes (updating selected value) inside parent component, you always need to listen to @update event. An example update function could look like this:

  onUpdate (newVal) { this.selected = newVal }

• Props with callback functions like: onChange, onSearchChange are now deprecated. Use events instead.
• touched prop is deprecated. Use @open to detect if the component has been touched.

Fixed

• #72 If vue-multiselect is inside a fieldset which has the disabled attribute, the component will be also partially disabled (pointer-events: none). IE11+
• #70
• #62
• #60
• #48

Additionally added some tweaks to the code

v0.3.1

Fixes:

• Fixed #58
• Fixed #59