Skip to content

Instantly share code, notes, and snippets.

@iegorov

iegorov/README.md

Last active August 11, 2018 15:38
Show Gist options
  • Save iegorov/89633da1a3d5c1d4c6cd23e5d63295f3 to your computer and use it in GitHub Desktop.
Save iegorov/89633da1a3d5c1d4c6cd23e5d63295f3 to your computer and use it in GitHub Desktop.
Download ZIP
Wrapper Component Example. Vue select2.
Raw
README.md

In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.

Resourses

Raw
index.html
<div id="el"></div>
<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
<div>
<p>Selected: {{ selected }}</p>
<select2 :options="options" v-model="selected">
<option disabled value="0">Select one</option>
</select2>
</div>
</script>
<script type="text/x-template" id="select2-template">
<select>
<slot></slot>
</select>
</script>
Raw
sctipt.js
Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function () {
var vm = this
$(this.$el)
// init select2
.select2({ data: this.options })
.val(this.value)
.trigger('change')
// emit event on change.
.on('change', function () {
vm.$emit('input', this.value)
})
},
watch: {
value: function (value) {
// update value
$(this.$el)
.val(value)
.trigger('change')
},
options: function (options) {
// update options
$(this.$el).empty().select2({ data: options })
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
})
var vm = new Vue({
el: '#el',
template: '#demo-template',
data: {
selected: 2,
options: [
{ id: 1, text: 'Hello' },
{ id: 2, text: 'World' }
]
}
})
Raw
style.css
html, body {
font: 13px/18px sans-serif;
}
select {
min-width: 300px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment