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

Revisions

  1. iegorov revised this gist Jun 8, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.

    **Resourses**

    - [email protected]
  2. iegorov revised this gist Jun 8, 2018. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    **Resourses**

    - [email protected]
    - select2.min.css
    - [email protected]
    - vue.js
  3. iegorov created this gist Jun 8, 2018.
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <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>
    43 changes: 43 additions & 0 deletions sctipt.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    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' }
    ]
    }
    })
    6 changes: 6 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    html, body {
    font: 13px/18px sans-serif;
    }
    select {
    min-width: 300px;
    }