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;