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
<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
<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