diff --git a/dist/build.js b/dist/build.js
index fe5b0e0ec..f8b4e91ac 100644
--- a/dist/build.js
+++ b/dist/build.js
@@ -21635,16 +21635,16 @@ exports.default = {
// select: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}],
select: null,
placeholder: 'Choose a Country',
- multiple: false,
+ multiple: true,
maxHeight: '400px',
- // options: require('./countries.js')
- options: ['one', 'two', 'three']
+ options: require('./countries.js')
+ // options: ['one','two','three']
// options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
};
}
};
if (module.exports.__esModule) module.exports = module.exports.default
-;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n\n\n
Vue Select \n
A simple component that provides similar functionality to Select2 without the overhead of jQuery.
\n\n
\n\n
\n
\n \n \n
\n\n
\n
Selected: {{ select | json }}\n
\n
\n\n
\n\n
\n
\n
Todos: \n
\n Fix layout issue where selected tags & text input overflow outside .dropdown. \n Clicking the 'caret' icon should toggle the dropdown. \n Add boolean prop to disable search. \n Add a 'simple' prop that disables search, and the selected 'tags'. Uses an active class on the selected item(s) while keeping the placeholder constant. \n \n
\n\n
\n
Component Props \n\n
\n Max Height \n Limit the height of the dropdown menu. \n
\n\n
\n Placeholder \n Equivalent to the placeholder attribute. \n
\n\n\n
\n \n \n Equivalent to the multiple attribute to a <select> \n
\n\n
\n\n
\n
\n
\n\n
\n\n
Build Setup \n
install dependencies \n
npm install
\n
serve with hot reload at localhost:8080 \n
npm run dev
\n
build for production with minification \n
npm run build
\n
lint all *.js and *.vue files \n
npm run lint
\n
run unit tests \n
npm test
\n\n
\n\n
Vue Select \n
A simple component that provides similar functionality to Select2 without the overhead of jQuery.
\n\n
\n\n
\n
\n \n \n
\n\n
\n
Selected: {{ select | json }}\n
\n
\n\n
\n\n
\n
\n
Todos: \n
\n Fix layout issue where selected tags & text input overflow outside .dropdown. \n Clicking the 'caret' icon should toggle the dropdown. \n Add boolean prop to disable search. \n Add a 'simple' prop that disables search, and the selected 'tags'. Uses an active class on the selected item(s) while keeping the placeholder constant. \n \n
\n\n
\n
Component Props \n\n
\n Max Height \n Limit the height of the dropdown menu. \n
\n\n
\n Placeholder \n Equivalent to the placeholder attribute. \n
\n\n\n
\n \n \n Equivalent to the multiple attribute to a <select>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render. \n
\n\n
\n\n
\n
\n
\n\n
\n\n
Build Setup \n
install dependencies \n
npm install
\n
serve with hot reload at localhost:8080 \n
npm run dev
\n
build for production with minification \n
npm run build
\n
lint all *.js and *.vue files \n
npm run lint
\n
run unit tests \n
npm test
\n\n
\n
\n \n {{ placeholder }}\n \n\n \n {{ getOptionLabel(option) }}\n \n × \n \n \n\n
\n\n \n
\n
\n \n {{ placeholder }}\n \n\n \n {{ getOptionLabel(option) }}\n \n × \n \n \n\n
\n\n \n
- Equivalent to the multiple attribute to a <select>
+ Equivalent to the multiple attribute to a <select>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.
@@ -94,10 +94,10 @@ export default {
// select: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}],
select: null,
placeholder: 'Choose a Country',
- multiple: false,
+ multiple: true,
maxHeight: '400px',
- // options: require('./countries.js')
- options: ['one','two','three']
+ options: require('./countries.js')
+ // options: ['one','two','three']
// options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
}
}
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 5a4863aed..910ab88aa 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -117,7 +117,7 @@
{{ placeholder }}
-
+
{{ getOptionLabel(option) }}
×
@@ -211,24 +211,25 @@
}
});
},
-
- watch: {
- value (val, oldVal) {
- // return this.$set('value', ['test'])
- }
- },
-
+
methods: {
- select(v) {
- if (this.value.indexOf(v) === -1) {
+ select(option) {
+ if (! this.isOptionSelected(option) ) {
if (this.multiple) {
- this.value.push(v)
+
+ // check if value is currently null/undefined/false
+ if( ! this.value ) {
+ this.$set('value', [option])
+ } else {
+ this.value.push(option)
+ }
+
} else {
- this.value = [v]
+ this.value = option
}
} else {
if (this.multiple) {
- this.value.$remove(v)
+ this.value.$remove(option)
}
}
@@ -244,7 +245,7 @@
},
isOptionSelected( option ) {
- if( this.multiple ) {
+ if( this.multiple && this.value ) {
return this.value.indexOf(option) !== -1
}
@@ -314,6 +315,16 @@
}
return true;
+ },
+
+ valueAsArray() {
+ if( this.multiple ) {
+ return this.value
+ } else if (this.value) {
+ return [this.value]
+ }
+
+ return []
}
}