Created
January 24, 2018 15:28
-
-
Save ArthurN/7e1517385b55dc7c996388597149eca7 to your computer and use it in GitHub Desktop.
Vue wrapper for jquery bootstrap multiselect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template lang='slm'> | |
select.form-control multiple="multiple" | |
option v-for="option in selectOptions" :value='option.value' {{ option.label }} | |
</template> | |
<script> | |
export default { | |
name: 'bootstrap-multiselect', | |
props: { | |
selectOptions: { | |
type: Array, | |
required: true, | |
default: () => { return [] } | |
}, | |
value: { | |
type: Array, | |
required: true, | |
default: () => { return [] } | |
}, | |
}, | |
watch: { | |
value: function(val) { | |
// TODO: Is there a cleaner multiselect method that does this for us? | |
$(this.$el).multiselect('deselectAll', false); // second param false = deselect even if dropdown not open | |
$(this.$el).multiselect('select', val); | |
} | |
}, | |
mounted() { | |
$(this.$el).multiselect({ | |
numberDisplayed: 0, | |
onChange: () => { | |
const value = $(this.$el).val() || []; | |
this.$emit('input', value); | |
} | |
}).multiselect('select', this.value); | |
}, | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how I could use this wrapper