{{ valuePrimitive | json }}

multiselect(
  :options="options",
  :selected="valuePrimitive",
  :multiple="false",
  :searchable="false",
  :close-on-select="false",
  :show-labels="false"
  @update="updateValuePrimitive"
  placeholder="Select one"
  label="name"
)

updateValuePrimitive (value) {
  this.valuePrimitive = value
}

{{ value | json }}

multiselect(
  :options="source",
  :selected="value",
  :searchable="false",
  :close-on-select="false",
  :allow-empty="false",
  @update="updateValue",
  deselect-label="Can't remove this value"
  key="name"
  label="name"
  placeholder="Select one"
)

updateValue (value) {
  this.value = value
}

{{ value | json }}

multiselect(
  :options="source",
  :selected="value",
  :searchable="true",
  :custom-label="nameWithLang"
  @update="updateValue",
  placeholder="Select one",
  label="name",
  key="name"
)

updateValue (value) {
  this.value = value
},
nameWithLang ({ name, language }) {
  return `${name} — [${language}]`
}

{{ multiValue | json }}

multiselect(
  :options="source",
  :selected="multiValue",
  :multiple="true",
  :searchable="true",
  :close-on-select="false",
  :clear-on-select="false",
  :limit="2"
  @update="updateMultiValue",
  placeholder="Pick some"
  label="name",
  key="name"
)

updateMultiValue (value) {
  this.multiValue = value
},

{{ selectedCountries | json }}

multiselect(
  :options="countries",
  :selected="selectedCountries",
  :multiple="multiple",
  :local-search="false",
  :clear-on-select="false",
  :close-on-select="false",
  :loading="isLoading",
  id="ajax",
  @search-change="asyncFind",
  @update="asyncUpdate",
  label="name"
  key="code"
  placeholder="Type to search"
)
  span(slot="noResult").
    Oops! No elements found. Consider changing the search query.

asyncFind (query) {
  if (query.length === 0) {
    this.countries = []
  } else {
    this.isLoading = true
    setTimeout(() => {
      this.countries = countries.filter((element, index, array) => {
        return element.name.toLowerCase().includes(query.toLowerCase())
      })
      this.isLoading = false
    }, 1000)
  }
},
asyncUpdate (newVal) {
  this.selectedCountries = newVal
}

{{ taggingSelected | json }}

multiselect(
  :options="taggingOptions",
  :selected="taggingSelected",
  :multiple="true",
  :searchable="searchable",
  :taggable="true",
  @tag="addTag",
  @update="updateSelectedTagging",
  tag-placeholder="Add this as new tag"
  placeholder="Type to search or add tag"
  label="name"
  key="code"
)
  span(slot="noResult").
    Oops! No elements found. Consider changing the search query.

addTag (newTag) {
  const tag = {
    name: newTag,
    // Just for example needs as we use Array of Objects that should have other properties filled.
    // For primitive values you can simply push the tag into options and selected arrays.
    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
  }
  this.taggingOptions.push(tag)
  this.taggingSelected.push(tag)
},
updateSelectedTagging (value) {
  console.log('@tag: ', value)
  this.taggingSelected = value
}

{{ selectedStyle | json }}

multiselect(
  :options="styleList",
  :selected="selectedStyle",
  :option-height="130",
  :custom-label="styleLabel",
  :show-labels="false",
  @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
  }
}

<!-- customOptionPartial.html -->
<div>
  <img class="option__image" :src="option.img" alt="Poster" />
  <div class="option__desc">
    <span class="option__title">{‌{ option.title }}</span>
    <span class="option__small">
      {‌{ option.desc }}
    </span>
  </div>
</div>

multiselect(
  :options="actions",
  :searchable="false",
  :reset-after="true",
  @select="dispatchAction",
  placeholder="Pick action",
)

dispatchAction (actionName) {
  switch (actionName) {
    case 'alert':
      window.alert('You just dispatched "alert" action!')
      break
    case 'console.log':
      console.log('You just dispatched "console.log" action!')
      break
    case 'scrollTop':
      window.scrollTo(0, 0)
      break
  }
}

// Template
div(:class="{ 'invalid': isInvalid }")
  label.typo__label Must have at least one value
  multiselect(
    :options="options",
    :selected="exampleValue6",
    :multiple="true",
    :searchable="true",
    :allow-empty="false",
    :hide-selected="true",
    :close-on-select="false",
    :max-height="400",
    :max="5",
    @close="onTouch",
    @update="updateExampleValue",
    placeholder="Pick at least one"
  )

// Script
computed: {
  isInvalid () {
    return this.isTouched && this.exampleValue6.length === 0
  }
},
methods: {
  onTouch () {
    this.isTouched = true
  },
  updateExampleValue (value) {
    this.exampleValue6 = value
  }
}

// Styles
.invalid {
  .typo__label {
    color: $error-color;
  }
  .multiselect__tags {
    border-color: $error-color !important;
  }
}