SelectBoxIt jq 插件不适用于 Vue.js

Question

There are many dynamically generated select box in a page. I want to apply the jquery selectBoxIt ( http://gregfranko.com/jquery.selectBoxIt.js/ ) plugin. I am using Vue js . Where should I put

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

in order to attach the plugin with the select elements? The class applied to the select box is cl_v . I have placed the above code in created: , mounted: and destroyed: . But it did not work. How can I use the plugin with Vue.js? Thanks

Answer 1

You should create a wrapper component . That is how you make VueJS and jQuery play nice .

If the only thing required for your selectBoxIt to work is the call above, you just need something like this mounted section:

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

Answer 2

Please check the official document: Wrapper Component

here is the sample code:

 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>

Here is the JSFiddle: https://jsfiddle.net/5qnqkjr1/131/