fix #54 and add regression test, use 2 space indents

README.md

@@ -7,7 +7,8 @@ Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js compon
 
 #### Features
 
-- **Tagging Support (+v.1.1.0)**
+- **AJAX Support +v1.2.0**
+- Tagging Support **+v.1.1.0**
 - No JS Dependencies
 - List Filtering/Searching
 - Supports Vuex
@@ -17,9 +18,9 @@ Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js compon
 
 #### Upcoming/In Progress
 
-- ~~Tagging (adding options not present in list, see `taggable` branch)~~ **added in v.1.1.0**
+- ~~Tagging (adding options not present in list, see `taggable` branch)~~ **+v.1.1.0**
+- ~~Asyncronous Option Loading~~ **+v.1.2.0**
 - Rich Option Templating
-- Asyncronous Option Loading
 
 ## Live Examples & Docs
 [http://sagalbot.github.io/vue-select/](http://sagalbot.github.io/vue-select/)

src/components/Select.vue

@@ -138,15 +138,18 @@
 		animation: vSelectSpinner 1.1s infinite linear;
 		transition: opacity .1s;
 	}
+
 	.v-select.loading .spinner {
 		opacity: 1;
 	}
+
 	.v-select .spinner,
 	.v-select .spinner:after {
 		border-radius: 50%;
 		width: 5em;
 		height: 5em;
 	}
+
 	@-webkit-keyframes vSelectSpinner {
 		0% {
 			transform: rotate(0deg);
@@ -155,6 +158,7 @@
 			transform: rotate(360deg);
 		}
 	}
+
 	@keyframes vSelectSpinner {
 		0% {
 			transform: rotate(0deg);
@@ -172,7 +176,7 @@
           {{ placeholder }}
         </span>
 
-        <span class="selected-tag" v-for="option in valueAsArray">
+        <span class="selected-tag" v-for="option in valueAsArray" track-by="$index">
           {{ getOptionLabel(option) }}
           <button v-if="multiple" @click="select(option)" type="button" class="close">
             <span aria-hidden="true">&times;</span>
@@ -249,7 +253,9 @@
 			 */
 			options: {
 				type: Array,
-        default() { return [] },
+				default() {
+					return []
+				},
 			},
 
 			/**
@@ -388,7 +394,11 @@
 
 		watch: {
 			value(val, old) {
+				if (this.multiple) {
+					this.onChange ? this.onChange(val) : null
+				} else {
 					this.onChange && val !== old ? this.onChange(val) : null
+				}
 			},
 			options() {
 				if (!this.taggable) {
@@ -418,13 +428,11 @@
 					}
 
 					if (this.multiple) {
-
 						if (!this.value) {
 							this.$set('value', [option])
 						} else {
 							this.value.push(option)
 						}
-
 					} else {
 						this.value = option
 					}

test/unit/specs/Select.spec.js

@@ -190,32 +190,57 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].isOptionSelected('one')).toEqual(true)
 		})
 
+		describe('onChange Callback', () => {
 			it('can run a callback when the selection changes', (done) => {
 				const vm = new Vue({
-				template: '<div><v-select :on-change="foo" value="bar" :options="options"></v-select></div>',
+					template: `<div><v-select :value="['foo']" :options="['foo','bar','baz']" :on-change="cb"></v-select></div>`,
 					components: {vSelect},
-				data: {
-					val: null,
-					options: ['foo', 'bar', 'baz']
-				},
 					methods: {
-					foo(value) {
+						cb(val) {
-						this.val = value
 						}
 					}
 				}).$mount()
 
-			vm.$children[0].select('foo')
+				spyOn(vm.$children[0], 'onChange')
-			Vue.nextTick(function () {
-				expect(vm.$get('val')).toEqual('foo')
 
-				vm.$children[0].$set('value', 'baz')
+				vm.$children[0].select('bar')
-				Vue.nextTick(function () {
+
-					expect(vm.$get('val')).toEqual('baz')
+				Vue.nextTick(() => {
+					expect(vm.$children[0].onChange).toHaveBeenCalledWith('bar')
+					vm.$children[0].select('baz')
+
+					Vue.nextTick(() => {
+						expect(vm.$children[0].onChange).toHaveBeenCalledWith('baz')
 						done()
 					})
 				})
 			})
+
+			it('should run onChange when multiple is true and the value changes', (done) => {
+				const vm = new Vue({
+					template: `<div><v-select v-ref:select :value="['foo']" :options="['foo','bar','baz']" multiple :on-change="cb"></v-select></div>`,
+					methods: {
+						cb(val) {
+						}
+					}
+				}).$mount()
+
+				spyOn(vm.$children[0], 'onChange')
+
+				vm.$children[0].select('bar')
+
+				Vue.nextTick(() => {
+					expect(vm.$children[0].onChange).toHaveBeenCalledWith(['foo','bar'])
+					vm.$children[0].select('baz')
+
+					Vue.nextTick(() => {
+						expect(vm.$children[0].onChange).toHaveBeenCalledWith(['foo','bar','baz'])
+						done()
+					})
+				})
+
+			})
+		})
 	})
 
 	describe('Toggling Dropdown', () => {