SelectBoxIt jq 插件不适用于 Vue.js

Question

一个页面中有很多动态生成的选择框。 我想应用 jquery selectBoxIt ( http://gregfranko.com/jquery.selectBoxIt.js/ ) 插件。 我正在使用Vue js 。 我应该放在哪里

$('.cl_v').selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false });

为了附加插件与选择元素？ 应用于选择框的类是cl_v 。 我已经将上面的代码放在created: ， mounted:和destroyed:中。 但它没有用。 如何将插件与 Vue.js 一起使用？ 谢谢

Answer 1

您应该创建一个包装组件。 这就是你如何让 VueJS 和 jQuery 玩得更好。

如果你的selectBoxIt唯一需要的就是上面的调用，你只需要像这个mounted部分这样的东西：

mounted() {
  $(this.el).selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false });
}

Answer 2

请查看官方文档： Wrapper Component

这是示例代码：

 Vue.component('selectBoxIt', { props: ['options', 'value'], template: '#selectBoxIt-template', mounted: function () { var vm = this $(this.$el) .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) } } }); var app = new Vue({ el: '#app', template: '#demo-template', data: { fruits: [{id:1,name:'apple'},{id:2,name:'banana'}], selectId: 0 }, mounted: function() { $('#fruits').selectBoxIt(); } });

 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" /> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" /> <link type="text/css" rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"></div> <script type="text/x-template" id="demo-template"> <div> <p>selectId: {{ selectId }}</p> <selectBoxIt id="fruits" :options="fruits" v-model="selectId"> </selectBoxIt> </div> </script> <script type="text/x-template" id="selectBoxIt-template"> <select> <option v-for="option in options" :value="option.id">{{ option.name }}</option> </select> </script>

这是 JSFiddle： https ://jsfiddle.net/5qnqkjr1/131/