diff --git a/src/components/Select.vue b/src/components/Select.vue
index fd15431..33ab63e 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -346,13 +346,13 @@
aria-label="Search for option"
>
-
@@ -512,6 +512,12 @@
/**
* Callback to generate the label text. If {option}
* is an object, returns option[this.label] by default.
+ *
+ * Label text is used for filtering comparison and
+ * displaying. If you only need to adjust the
+ * display, you should use the `option` and
+ * `selected-option` slots.
+ *
* @type {Function}
* @param {Object || String} option
* @return {String}
@@ -519,6 +525,10 @@
getOptionLabel: {
type: Function,
default(option) {
+ if( this.index ) {
+ option = this.findOptionByIndexValue(option)
+ }
+
if (typeof option === 'object') {
if (!option.hasOwnProperty(this.label)) {
return console.warn(
@@ -527,28 +537,7 @@
'http://sagalbot.github.io/vue-select/#ex-labels'
)
}
-
- if(this.index) {
- if (!option.hasOwnProperty(this.index)) {
- console.warn(
- `[vue-select warn]: Index key "option.${this.index}" does not` +
- ` exist in options object ${JSON.stringify(option)}.`
- )
- }
- }
-
- if (this.label && option[this.label]) {
- return option[this.label]
- }
- }
- if(this.index) {
- let label = option
- this.options.forEach((val) => {
- if (val[this.index] == option) {
- label = val[this.label]
- }
- })
- return label
+ return option[this.label]
}
return option;
}
@@ -793,7 +782,13 @@
option = this.createOption(option)
}
if(this.index) {
- option = option[this.index]
+ if (!option.hasOwnProperty(this.index)) {
+ return console.warn(
+ `[vue-select warn]: Index key "option.${this.index}" does not` +
+ ` exist in options object ${JSON.stringify(option)}.`
+ )
+ }
+ option = option[this.index]
}
if (this.multiple && !this.mutableValue) {
this.mutableValue = [option]
@@ -875,22 +870,50 @@
* @return {Boolean} True when selected | False otherwise
*/
isOptionSelected(option) {
- if (this.multiple && this.mutableValue) {
let selected = false
- this.mutableValue.forEach(opt => {
- if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
- selected = true
- } else if (typeof opt === 'object' && opt[this.label] === option) {
- selected = true
- }
- else if (opt === option) {
+ this.valueAsArray.forEach(value => {
+ if (typeof value === 'object') {
+ selected = this.optionObjectComparator(value, option)
+ } else if (value === option || value === option[this.index]) {
selected = true
}
})
return selected
- }
+ },
- return this.mutableValue === option
+ /**
+ * Determine if two option objects are matching.
+ *
+ * @param value {Object}
+ * @param option {Object}
+ * @returns {boolean}
+ */
+ optionObjectComparator(value, option) {
+ if (this.index && value === option[this.index]) {
+ return true
+ } else if ((value[this.label] === option[this.label]) || (value[this.label] === option)) {
+ return true
+ } else if (this.index && value[this.index] === option[this.index]) {
+ return true
+ }
+ return false;
+ },
+
+ /**
+ * Finds an option from this.options
+ * where option[this.index] matches
+ * the passed in value.
+ *
+ * @param value {Object}
+ * @returns {*}
+ */
+ findOptionByIndexValue(value) {
+ this.options.forEach(_option => {
+ if (JSON.stringify(_option[this.index]) === JSON.stringify(value)) {
+ value = _option
+ }
+ })
+ return value
},
/**
@@ -1070,7 +1093,7 @@
* @return {Array}
*/
valueAsArray() {
- if (this.multiple) {
+ if (this.multiple && this.mutableValue) {
return this.mutableValue
} else if (this.mutableValue) {
return [].concat(this.mutableValue)
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index 72cab14..fe1cd33 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -851,6 +851,45 @@ describe('Select.vue', () => {
expect(vm.$children[0].mutableValue).toEqual(vm.value)
})
+ it('can determine if an object is pre-selected', () => {
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ value: 'foo',
+ options: [{
+ id: 'foo',
+ label: 'This is Foo'
+ }]
+ }
+ }).$mount()
+
+ expect(vm.$children[0].isOptionSelected({
+ id: 'foo',
+ label: 'This is Foo'
+ })).toEqual(true)
+ })
+
+ it('can determine if an object is selected after it has been chosen', () => {
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ options: [{id: 'foo', label: 'FooBar'}]
+ }
+ }).$mount()
+
+ vm.$children[0].select({id: 'foo', label: 'FooBar'});
+
+ // Vue.nextTick(() => {
+ expect(vm.$children[0].isOptionSelected({
+ id: 'foo',
+ label: 'This is Foo'
+ })).toEqual(true)
+ // done()
+ // })
+ })
+
it('can accept an array of objects and pre-selected values (multiple)', () => {
const vm = new Vue({
template: '
',
@@ -873,8 +912,9 @@ describe('Select.vue', () => {
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
}
}).$mount()
- vm.$children[0].select('foo')
+ vm.$children[0].deselect('foo')
expect(vm.$children[0].mutableValue.length).toEqual(1)
+ expect(vm.$children[0].mutableValue).toEqual(['bar'])
})
it('can deselect an option when multiple is false', () => {
@@ -886,7 +926,7 @@ describe('Select.vue', () => {
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
}
}).$mount()
- vm.$children[0].select('foo')
+ vm.$children[0].deselect('foo')
expect(vm.$children[0].mutableValue).toEqual(null)
})
@@ -925,39 +965,97 @@ describe('Select.vue', () => {
expect(vm.$children[0].$refs.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
})
- it('will console.warn when options contain objects without a valid index key', (done) => {
- spyOn(console, 'warn')
- const vm = new Vue({
- template: '
',
- data: {
- index: 'value',
- options: [{label: 'Foo'}]
- }
- }).$mount()
- vm.$children[0].open = true
- Vue.nextTick(() => {
- expect(console.warn).toHaveBeenCalledWith(
- `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
- )
- done()
- })
+ it('will console.warn when attempting to select an option with an undefined index', () => {
+ spyOn(console, 'warn')
+
+ const vm = new Vue({
+ template: '
',
+ data: {
+ options: [{label: 'Foo'}]
+ }
+ }).$mount()
+ vm.$children[0].select({label: 'Foo'})
+ expect(console.warn).toHaveBeenCalledWith(
+ `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
+ )
+ })
+
+ it('can find the original option within this.options', () => {
+ const vm = new Vue({
+ template: '
',
+ data: {
+ options: [{id: 1, label: 'Foo'},{id:2, label: 'Bar'}]
+ }
+ }).$mount()
+
+ expect(vm.$children[0].findOptionByIndexValue(1)).toEqual({id: 1, label: 'Foo'})
+ expect(vm.$children[0].findOptionByIndexValue({id: 1, label: 'Foo'})).toEqual({id: 1, label: 'Foo'})
})
- it('will not console.warn when options contain objects without an index key', (done) => {
- spyOn(console, 'warn')
- const vm = new Vue({
- template: '
',
- data: {
- options: [{label: 'Foo'}]
- }
- }).$mount()
- vm.$children[0].open = true
- Vue.nextTick(() => {
- expect(console.warn).not.toHaveBeenCalledWith(
- `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
- )
- done()
+ describe('And when option[index] is a nested object', () => {
+ it('can determine if an object is pre-selected', () => {
+ const nestedOption = {
+ value: {
+ nested: true
+ },
+ label: 'foo'
+ };
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ value: {
+ nested: true
+ },
+ options: [nestedOption]
+ }
+ }).$mount()
+ expect(vm.$children[0].isOptionSelected({
+ nested: true
+ })).toEqual(true)
})
+
+ it('can determine if an object is selected after it is chosen', () => {
+ const nestedOption = {
+ value: {
+ nested: true
+ },
+ label: 'foo'
+ };
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ options: [nestedOption]
+ }
+ }).$mount()
+ vm.$children[0].select(nestedOption)
+ expect(vm.$children[0].isOptionSelected(nestedOption)).toEqual(true)
+ })
+
+ it('can determine a selected values label', () => {
+ const nestedOption = {
+ value: {
+ nested: true
+ },
+ label: 'foo'
+ };
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ value: {
+ nested: true
+ },
+ options: [nestedOption]
+ }
+ }).$mount()
+
+ expect(vm.$children[0].getOptionLabel({
+ nested: true
+ })).toEqual('foo')
+ })
+
})
})
@@ -1501,7 +1599,7 @@ describe('Select.vue', () => {
value: 'foo'
}
}).$mount()
-
+
expect(vm.mutableValue).toEqual('foo')
vm.$el.querySelector( 'button.clear' ).click()
expect(vm.mutableValue).toEqual(null)
@@ -1520,6 +1618,6 @@ describe('Select.vue', () => {
const buttonEl = vm.$el.querySelector( 'button.clear' )
expect(buttonEl.disabled).toEqual(true);
})
-
+
});
})