Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #749 from vuematerial/issue#742

Browse source 
fix on issue #742 - v-model reflects changes on mdSelect
This commit is contained in:
Pablo Henrique 2017-05-21 18:30:54 -03:00 committed by GitHub
commit 0aa9df0215
3 changed files with 67 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
docs/src/pages/components/Select.vue
View file

@ -303,7 +303,24 @@
<div class="multiple" slot="demo">
<div class="field-group">
<md-input-container>
<label for="users">Users</label>
<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>
<div>Selected letters: {{ items }}</div>
<br/>
<br/>
<div class="field-group">
<md-input-container>
<label for="users">Multiselect with subheaders</label>
<md-select name="users" id="users" multiple v-model="users">
<md-subheader>Managers</md-subheader>
<md-option value="jim_halpert">Jim Halpert</md-option>
@ -325,12 +342,27 @@
</md-select>
</md-input-container>
</div>
<div>Selected users: {{ users }}</div>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-input-container&gt;
&lt;label for=&quot;users=&quot;&gt;Simple multiselect&lt;/label&gt;
&lt;md-select name=&quot;option=&quot; id=&quot;option=&quot; multiple v-model=&quot;items=&quot;&gt;
&lt;md-option v-for=&quot;option in options=&quot;
:key=&quot;option=&quot;
:value=&quot;option=&quot;&gt;
{ { option.name } }
&lt;/md-option&gt;
&lt;md-select&gt;
&lt;/md-input-container&gt;
&lt;div&gt;Selected letters: {{ items }}&lt;/div&gt;
&lt;md-input-container&gt;
&lt;label for=&quot;users&quot;&gt;Users&lt;/label&gt;
&lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;
@ -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: []
})
};
</code-block>
@ -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() {

2
src/components/mdSelect/mdOption.vue
View file

@ -21,7 +21,7 @@
export default {
props: {
value: [String, Boolean, Number]
value: [String, Boolean, Number, Object]
},
data: () => ({
parentSelect: {},

15
src/components/mdSelect/mdSelect.vue
View file

@ -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;