如何解决vue与传统jquery插件冲突
1个回答
2017-11-06 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
比如基于jquery的select2插件，在vue下单独用有很多问题，其实对于这类插件，可以用vue的自定义指令和组件来包装，解决冲突的问题。引用官方vue1.0和2.0的两个例子，学习一下。
例子1.0 例子2.0
大功告成。说说基于vue1的，对于下拉单选，用vue官方的例子即可，对于多选，看下面自己写的，核心是用指令对象的el、vm等获取被select2改变后的select下拉列表的相应对象，关键点是用jquery包装原生元素后用.val()获取多选值。
?
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
<body> <div id="el"> <p>Selected: {{selected}}</p> <select v-select3="selected" multiple class="app1" > <option value="0">default</option> <option v-for="o in options" :value="o.id">{{ o.text }}</option> </select> <p>Selected: {{market}}</p> <select v-select3="market" multiple class="app2" > <option value="0">default</option> <option v-for="o in markets" :value="o.id">{{ o.text }}</option> </select> </div> <script> Vue.directive('select3', { twoWay: true, priority: 1000, params: ['options'], bind: function () { var self = this; $(this.el) .select2() .on('change', function () { self.set($(self.el).val()); console.log($(self.el).val()); if ( self.expression == 'selected') { self.vm.market = []; } }) }, 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, market: '', options: [ { id: 1, text: 'hello' }, { id: 2, text: 'what' } ], markets: [ { id: 1, text: '文山二手车' }, { id: 2, text: '小哥二手车' } ] } }); setTimeout(function () { vm.market = 0; }, 0); </script></body>
另外，在插入默认值的时候，注意做一个异步插入，因为vue更新页面是异步的，这里做了一个setTimeout( , 0)。
例子1.0 例子2.0
大功告成。说说基于vue1的，对于下拉单选，用vue官方的例子即可，对于多选，看下面自己写的，核心是用指令对象的el、vm等获取被select2改变后的select下拉列表的相应对象，关键点是用jquery包装原生元素后用.val()获取多选值。
?
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
<body> <div id="el"> <p>Selected: {{selected}}</p> <select v-select3="selected" multiple class="app1" > <option value="0">default</option> <option v-for="o in options" :value="o.id">{{ o.text }}</option> </select> <p>Selected: {{market}}</p> <select v-select3="market" multiple class="app2" > <option value="0">default</option> <option v-for="o in markets" :value="o.id">{{ o.text }}</option> </select> </div> <script> Vue.directive('select3', { twoWay: true, priority: 1000, params: ['options'], bind: function () { var self = this; $(this.el) .select2() .on('change', function () { self.set($(self.el).val()); console.log($(self.el).val()); if ( self.expression == 'selected') { self.vm.market = []; } }) }, 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, market: '', options: [ { id: 1, text: 'hello' }, { id: 2, text: 'what' } ], markets: [ { id: 1, text: '文山二手车' }, { id: 2, text: '小哥二手车' } ] } }); setTimeout(function () { vm.market = 0; }, 0); </script></body>
另外，在插入默认值的时候，注意做一个异步插入，因为vue更新页面是异步的，这里做了一个setTimeout( , 0)。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
微测检测5.10
2023-05-10 广告
您好！建议咨 深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认 证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量），认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
