diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue index 93958cc..8fdce00 100644 --- a/docs/src/pages/components/Select.vue +++ b/docs/src/pages/components/Select.vue @@ -303,7 +303,24 @@
- + + + + {{ option.name }} + + + +
+ +
Selected letters: {{ items }}
+
+
+ +
+ + Managers Jim Halpert @@ -325,12 +342,27 @@
- +
Selected users: {{ users }}
+
+ <md-input-container> + <label for="users=">Simple multiselect</label> + <md-select name="option=" id="option=" multiple v-model="items="> + <md-option v-for="option in options=" + :key="option=" + :value="option="> + { { option.name } } + </md-option> + <md-select> + </md-input-container> + + <div>Selected letters: {{ items }}</div> + + <md-input-container> <label for="users">Users</label> <md-select name="users" id="users" multiple v-model="users"> @@ -361,10 +393,15 @@ export default { data: () => ({ food: '', - users: [ - 'jim_halpert', - 'michael_scott' - ] + users: [], + options: [ + { id: 1, name: 'a' }, + { id: 2, name: 'b' }, + { id: 3, name: 'c' }, + { id: 4, name: 'd' }, + { id: 5, name: 'e' } + ], + items: [] }) }; @@ -400,10 +437,15 @@ country: '', font: '', food: '', - users: [ - 'jim_halpert', - 'michael_scott' - ] + users: [], + options: [ + { id: 1, name: 'a' }, + { id: 2, name: 'b' }, + { id: 3, name: 'c' }, + { id: 4, name: 'd' }, + { id: 5, name: 'e' } + ], + items: [] }), methods: { setPulpFiction() { diff --git a/src/components/mdSelect/mdOption.vue b/src/components/mdSelect/mdOption.vue index be73fef..18896e8 100644 --- a/src/components/mdSelect/mdOption.vue +++ b/src/components/mdSelect/mdOption.vue @@ -21,7 +21,7 @@ export default { props: { - value: [String, Boolean, Number] + value: [String, Boolean, Number, Object] }, data: () => ({ parentSelect: {}, diff --git a/src/components/mdSelect/mdSelect.vue b/src/components/mdSelect/mdSelect.vue index 75a469a..c5ce819 100644 --- a/src/components/mdSelect/mdSelect.vue +++ b/src/components/mdSelect/mdSelect.vue @@ -60,6 +60,7 @@ watch: { value(value) { this.setTextAndValue(value); + this.selectOptions(value); }, disabled() { this.setParentDisabled(); @@ -81,6 +82,16 @@ setParentPlaceholder() { this.parentContainer.hasPlaceholder = !!this.placeholder; }, + selectOptions(modelValue) { + const optionsArray = Object.keys(this.options).map((el) => this.options[el]); + + if (optionsArray && optionsArray.length) { + optionsArray.filter((el) => modelValue.indexOf(el.value) !== -1) + .forEach((el) => { + el.check = true; + }); + } + }, getSingleValue(value) { let output = {}; @@ -124,7 +135,9 @@ return {}; }, setTextAndValue(modelValue) { - const output = this.multiple ? this.getMultipleValue(modelValue) : this.getSingleValue(modelValue); + const output = this.multiple ? + this.getMultipleValue(modelValue) : + this.getSingleValue(modelValue); this.selectedValue = output.value; this.selectedText = output.text;