Vue.js で Select2 を利用する小さいサンプル
ロゴ
「Web 開発」に関連する記事一覧

Vue.js で Select2 を利用する小さいサンプル

2019/12/19
jQuery JavaScript HTML 

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>

  このエントリーをはてなブックマークに追加    

<<「Web 開発」の記事一覧に戻る

関連記事

にほんブログ村 ゲームブログ ファイアーエムブレムへ にほんブログ村 デザインブログ コンピュータグラフィックスへ

0.0432 sec
Copyright(C)2006-2020 puarts All Rights Reserved