#Vue.js component for Select2

A [select2](https://select2.github.io) component for vue.js. Quickly create select2 components, load data via ajax and retrieve selected values and newly created tags.

#Usage

Download and register the component:

```
Vue.component(
    'select2',
    require('./components/select2.vue')
);
```

Then use your favourite bundler (browserify, webpack etc) to update your bundle.


##HTML

In your HTML simply add:

```html
<select2></select2>
```

##Props

The following props are vailable:

###:options

Prop for sending select2 options, maps directly to select2 (see: https://select2.github.io)

```HTML
<select2 :options="{tags: 'true'}"></select2>
```

**Note:** The select2 "data" option is bound via vue.js not select2, so acts the same as loading data via ajax.

###data-url

The URL for retrieving the data to populate your select2 select box (Expects `JSON)

```HTML
<select2 data-url="my/select2/data"></select2>
```

###dispatch-id

The dispatch id for the component. This is only needed if you have multiple select2 boxes on one page so you can identify which componant sent the dispatch. 

```HTML
<select2 dispatch-id="states"></select2>
<select2 dispatch-id="countries"></select2>
```

You can then pick the id with the second paramater of each event:

```
events: {
    'select2-selected' : function(selected, dispatchId){
	console.log('Item selected for ' + dispatchId);
    },
    'select2-tag-created' : function(tags, dispatchId){
	console.log('New tag created for ' + dispatchId);
    }
```

##Dispatchers

There are two dispatchers:

###select2-selected

Supplies a list of all selected list items (excluding created tags).

###select2-tag-created

Supplies a list of all newly created tags.

##Example Parent ViewModel

```javascript
var vm = new Vue({
    el: 'body',
    data: {
    	'selected' : [],
    	'createdTags': []
    },
    events: {
    	'select2-selected' : function(selected){
		  // Set the selected list
		  this.$set('selected', selected);
    	},
    	'select2-tag-created' : function(tags){
		  // Set the created tags list
		  this.$set('createdTags', tags);
    	}
    }
});

```