vue2组件之select2调用的示例代码

目前，项目中使用了纯前端的静态项目+RESTFul接口的模式。为了更好的对数据进行操作，前端使用了vue2的mvvm功能，但是由于不是单页面应用，所以，并没有涉及到其它的如vue-route等功能，也未使用webpack等编译功能，所以，也没有使用.vue文件功能。这时候，如果用到控件，则多数从原jquery的组件中选择。

select下拉搜索选择

这次的需求调研与设计是原来做winform开发的同事，由于用惯了devexpress这个控件库，所以，对于searchlookupeditor这个控件情有独钟，所以，在设计的时候，许多地方都用到。

最初实现

最初，我使用了select2绑定select标签，设定其change事件 ，在事件中修改对应的vue的data值，同时，在vue中设定watch``data中被绑定的属性，属性值发生变化，则修改对应的dom的val，然后再触发select2的change事件。当然，这种对应关系，我在select标签上放了一个data-vuep来保存其与vue属性的对应关系，并放在全局的select2vue和dom2vue中。

//mounted中的部分代码            select2vue = {};          $("select").each(function (index, item) {            var s2 = $(item).select2({              language: "zh-CN", //设置 提示语言              width: "100%", //设置下拉框的宽度              theme: "classic",              placeholder: "请选择"            }).on("change", function (e) {              console.log(e);              var v = $(e.target).val();              var p = $(e.target).attr("data-vuep");              eval("vue_cust_busi." + p + "='" + v + "';");              //$(e.target).find("option").attr("selected",false);              //$(e.target).find("option[value='"+v+"']").attr("selected",true);            });            var p = $(item).attr("data-vuep");            select2vue[p] = s2;            dom2vue[p] = item;          });          setTimeout(function(){            vue_cust_busi.editor.ID_CUST="3";            vue_cust_busi.editor.NAME_CUST="*有限责任公司";            console.log("修改");          },10,null);//watch中的部分代码          "temp.P1": function (val) {            fire(arguments.callee.name.toString(), val);          },//通用函数    function fire(p, val) {      $(dom2vue[p]).val(val);      select2vue[p].trigger("change");    }//html                        <select data-vuep="editor.P1" class="form-control ">                             <option value="" ></option>                              <option v-for="yearOpt in yearOpts" v-bind:value="yearOpt">{{yearOpt}}</option>                         </select>

为什么要用一个data-vuep来将数据与vue的属性关联呢，因为我发现，select2初始化了这个select标签之后，修改这个标签的值无法触发修改vue对应的v-model的属性。所以，只能用这个方法。