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/