Vue.js と Select2 を組み合わせて使用したくなったので、こちらのサイトを参考に簡単なサンプルを作りました。実行例とソースコードを載せておきます。
Selected: {{selected[0]}}
Selected: {{selected[1]}}
Selected: {{selected[2]}}
以下がソースコードです。そのままコピペで動くかと思います。
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>
<div id="demo">
<div>
<p>Selected: {{selected[0]}}</p>
<select2 :options="options" v-model="selected[0]">
</select2>
<p>Selected: {{selected[1]}}</p>
<select2 :options="options" v-model="selected[1]">
</select2>
<p>Selected: {{selected[2]}}</p>
<select2 :options="options" v-model="selected[2]">
</select2>
</div>
</div>
<script>
// select2 を使うためのVueコンポーネント
Vue.component('select2', {
template: '<select></select>',
props: {
options: Array,
value: Number,
},
mounted: function () {
$(this.$el)
// init select2
.select2({ data: this.options })
.val(this.value)
.trigger('change')
.on('change', (event) =>
this.$emit('input', parseInt(event.target.value, 10))
)
},
watch: {
value: function (value) {
// update value
$(this.$el)
.val(value)
.trigger('change')
},
options: function (options) {
// update options
$(this.$el).select2({ data: options }).trigger('change')
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
});
const vm = new Vue({
el: '#demo',
data: {
selected: [1, 0, 2],
options: [
{ id: 0, text: 'hoge' },
{ id: 1, text: 'fuga' },
{ id: 2, text: 'piyo' }
],
}
});
// 後からオプションを追加できます
vm.options.push({ id: 3, text: 'hogehoge' });
vm.options.push({ id: 3, text: 'fugafuga' });
</script>
