vuejs
/
vue
mirror of https://github.com/vuejs/vue.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js custom directive integration example (select2)</title>
    <script src="../../dist/vue.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <style>
      select {
        min-width: 300px;
      }
    </style>
  </head>
  <body>

    <div id="el">
      <p>Selected: {{selected}}</p>
      <select v-select="selected" options="options">
        <option value="0">default</option>
      </select>
    </div>

    <script>
    Vue.directive('select', {
      twoWay: true,
      bind: function () {
        var optionsData
        var optionsExpression = this._checkParam('options')
        if (optionsExpression) {
          optionsData = this.vm.$eval(optionsExpression)
        }
        var self = this
        $(this.el)
          .select2({
            data: optionsData
          })
          .on('change', function () {
            self.set(this.value)
          })
      },
      update: function (value) {
        $(this.el).val(value).trigger('change')
      },
      unbind: function () {
        $(this.el).off().select2('destroy')
      }
    })

    var vm = new Vue({
      el: '#el',
      data: {
        selected: 0,
        options: [
          { id: 1, text: 'hello' },
          { id: 2, text: 'what' }
        ]
      }
    })
    </script>
  </body>
</html>