vue2.x双向绑定封装详解

nbsp;html>


  <title>vue select2 封装</title>
  <link>
  <script></script>
  <script></script>
  <script></script>
  <style>
    .content{
      text-align: center;
      padding:50px;
    }
    .content *{
      text-align: left;
    }
    .select{
      width: 350px;
    }
  </style>
  <p>
    <select></select>
    <br>
    <span>结果：{{ selectValue }}</span>
  </p>

<script>
  Vue.directive(&#39;select2&#39;, {
   inserted: function (el, binding, vnode) {
     let options = binding.value || {};
 
    $(el).select2(options).on("select2:select", (e) => {
     // v-model looks for
     // - an event named "change"
     // - a value with property path "$event.target.value"
       el.dispatchEvent(new Event(&#39;change&#39;, { target: e.target })); //说好的双向绑定，竟然不安套路
    });
   },
   update: function(el, binding, vnode) {
    $(el).trigger("change");
   }
  });
 
  var vueApp = new Vue({
   el: "#vue-example",
   data: {
    selectValue: &#39;你还没有选值&#39;,
    options: {
      data: [
          { id: 0, text: &#39;enhancement&#39; },
        { id: 1, text: &#39;bug&#39; },
        { id: 2, text: &#39;duplicate&#39; },
        { id: 3, text: &#39;invalid&#39; },
        { id: 4, text: &#39;wontfix&#39; }
      ]
    }
   }
  });
</script>