Tags Element

An element used to render a tags input using Vue-Multiselect.

Examples
Options
Properties
Methods
Slots
Events

#Examples

Basic Usage

Renders a tags input.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        tags: {
          type: 'tags',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          default: ['cherry']
        }
      }
    })
  }
</script>

Form `data`

Create Tag

Allowing to create a new tag using create true option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        tags: {
          type: 'tags',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          create: true
        }
      }
    })
  }
</script>

Custom Option & Tag

Custom template for tag and options using slots.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        select: {
          type: 'tags',
          items: {
            us: { name: 'United States', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/um.svg' },
            cn: { name: 'China', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/cn.svg' },
            in: { name: 'India', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/in.svg' }
          },
          default: ['us'],
          native: false,
          search: false,
          trackBy: 'name',
          slots: {
            tag: Vue.extend({
              props: ['el$', 'option', 'remove'],
              template: `
                <span class="country-tag">
                  <img height="12" :src="option.flag" /> &nbsp; {{ option.name }}  <a href="" @click.prevent="remove(option)">&times;</a>
                </span>
              `
            }),
            option: Vue.extend({
              props: ['el$', 'option'],
              template: `
                <span>
                  <img height="12" :src="option.flag" /> &nbsp; {{ option.name }}
                </span>
              `
            })
          }
        }
      }
    })
  }
</script>

<style lang="scss">
  .country-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid #bbbbbb;
    margin-top: -4px;
    background: #f5f7f9;
    margin-right: 4px;
  }

</style>

#Options

Name	Type	Description
items	`obj\|arr`	List of select options.
search	`boolean`	Determines whether the select options should be searchable.
trackBy	`string`	When item values are objects this object element will be used to track search.
limit	`number`	Maximum number of search options.
create	`boolean`	Whether new tags are allowed to be created.
default	`array`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	The placeholder of the element.
floating	`string`	The floating label of the element.
disabled	`boolean`	Whether the field is disabled.
options	`object`	Additional options for the select.

#Properties

Name	Type	Default	Description
disabled	`boolean`	`false`	Whether the field is disabled.
items	`obj\|arr`	`null`	List of select options.
native	`boolean`	`true`	Determines whether the native select should be used by default.
trackBy	`string`	`'label'`	When item values are objects this object element will be used to track search.
search	`boolean`	`false`	Determines whether the select options are searchable.
limit	`number`	`1000`	Maximum number of search options.
defaultValue	`array`	`null`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	`null`	The placeholder of the element.
floating	`string`	`null`	The floating label of the element.
options	`object`	`{}`	Additional options for the select.
select$	`object`	`null`	The select element / component.
loading	`boolean`	`false`	Determines whether the element is going through async process to load options.
create	`boolean`	`false`	Whether new tags are allowed to be created.
selectOptions	`array`	-	List of select options converted to an array of objects.
selectedOption	`object`	-	Retrieves the selected option.
isNative	`string`	-	Determines if the native select is used.

#Methods

# .disable()

Disabled the field.

# .enable()

Enables the field.

# .select(option)

Parameters

option str|num : the key of option to select.

Selects an option.

# .unselect(option)

Parameters

option str|num : the key of option to unselect.

Unselects an option.

#Slots

# option

Props

el$ object : The element component.
option object : Select option.
search string : Current value of search.

Contains the select option template.

# beforeList

Props

el$ object : The element component.

Component to be rendered before the option list.

# afterList

Props

el$ object : The element component.

Component to be rendered after the option list.

# noResult

Props

el$ object : The element component.

Component to be rendered when there are no search results.

# noOptions

Props

el$ object : The element component.

Renders the select options list is empty.

# tag

Props

el$ object : The element component.
option object : Selected option.
search object : The current value of search.
remove function : Removes the tag. Must receive option as the first parameter.

Contains a selected tag.

#Events

# select(selectedOption)

Parameters

selectedOption object : the selected option.

Triggered when the user selects an option when using not native element.

# remove(removedOption)

Parameters

removedOption object : the removed option.

Triggered when the user removes a selected option.

# searchChange(searchQuery)

Parameters

searchQuery string : the current search query.

Triggered when the user changes the search criteria.

# open

Triggered when the option list is opened.

# close(value)

Parameters

value string : value of the select.

Triggered when the option list is closed.

# tag(searchQuery)

Parameters

searchQuery string : the current search query.

Triggered when the user creates a tag.