VueJsコンポーネント化

はじめに

表題とおりに、VueJsはとてもすごいライブラリーですけど、VueJsだけで開発すると、まだ足りないと思います。特殊な機能を入れたい時に、別のライブラリを使わないといけないです。
その時にVueJsコンポーネント化の変換が必要になると思います。以下のサンプリングはDatepickerとSelect2ライブラリをVueJsコンポーネント化することです。

Vue Component Datepicker

• Datepickerライブラリー: https://jqueryui.com/datepicker/
• Html Template

  <script type="text/x-template" id="date-picker">
      <input placeholder="YYYY-MM-DD" style="width: 100%" type="text">
  </script>

• Javascriptで定義

    Vue.component('datepicker', {
        props: ['value'],
        template: '#date-picker',
        mounted: function () {
            var vm = this;
            // Init datepicker
            $(this.$el).datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function(dateText) {
                    vm.$emit('input', dateText);
                }
            });
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value)
            }
        },
        destroyed: function () {
            //$(this.$el).off().select2('destroy')
        }
    });

• htmlで実行

<datepicker v-bind:value="value" v-model="value"></datepicker>

Vue Component Select2

• Select2ライブラリ: https://select2.org/
• Html Template

    <script type="text/x-template" id="select2-template">
        <select style="width: 100%">
            <slot></slot>
        </select>
    </script>

• Javascriptで定義

    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');
                });
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value)
            },
            options: function (options) {
                // update options
                $(this.$el).empty().select2({ data: options })
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    });

• Htmlで実行

 options = [
    {
        id: 0,
        text: 'enhancement'
    },
    {
        id: 1,
        text: 'bug'
    },
    {
        id: 2,
        text: 'duplicate'
    },
    {
        id: 3,
        text: 'invalid'
    },
    {
        id: 4,
        text: 'wontfix'
    }
  ];

    <select2 :options="options" v-model="idValue">
    </select2>

最後に

DatepickerとSelect2だけVueJsコンポーネント化をしましたが、他のライブラリもう同じやり方でコンポーネント化出来ますので、自由で試してくださいませ。

あと、実際にあるライブラリがVueJsコンポーネント化にされたので、すぐ使えます。

例えば:

• Vue Select https://sagalbot.github.io/vue-select/
• Vuejs-datepicker https://www.npmjs.com/package/vuejs-datepicker