Vue Selectize

WARN

This content is under revision and it is incomplete.

TIP

VueSelectize leverages scoped slots to allow for total customization of the presentation layer. Slots can be used to change the look and feel of the UI, or to simply swap out text.

# item

The text is displayed to represent each selected item.

  • item {Object|String} - A selected option
selectizejs@github.com
<template>
  <VSelectize v-model="selected" :options="options" key-by="username" label="username" :keys="['username', 'host']">
    <template v-slot:item="{item}">{{ item.username }}@{{ item.host }}</template>
  </VSelectize>
</template>
<script>
  import VSelectize from '@isneezy/vue-selectize'
  export default {
    name: 'ItemSlot',
    components: { VSelectize },
    data: () => ({
      options: [{username: 'selectizejs', host: 'github.com'}],
      selected: {username: 'selectizejs', host: 'github.com'}
    })
  }
</script>

# option

The option within the dropdown.

  • option {Object} - The currently isolated option from filteredOptions
selectizejs@github.com
<template>
  <VSelectize v-model="selected" :options="options" key-by="username" label="username" :keys="['username', 'host']">
    <template v-slot:option="{option}">{{ option.username }}@{{ option.host }}</template>
    <template v-slot:item="{item}">{{ item.username }}@{{ item.host }}</template>
  </VSelectize>
</template>
<script>
  import VSelectize from '@isneezy/vue-selectize'
  export default {
    name: 'OptionSlot',
    components: { VSelectize },
    data: () => ({
      options: [{username: 'selectizejs', host: 'github.com'}],
      selected: {username: 'selectizejs', host: 'github.com'}
    })
  }
</script>

# create-item

# spinner

←