SelectBoxIt jq plugin not working with 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

Btw try to wrap this in jQuery document ready function and then put it into the mounted hook. — Belmin Bedak, Apr 21 '17 at 14:49
@BelminBedak $(function () { $('.dropdown_cl_v').selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false }); }); inside mounted is also not working — sm12, Apr 21 '17 at 14:54
I didn't said you to do that - try like this - `mounted: function() { $(document).ready(function() { $('.cl_v').selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false }); }); }` — Belmin Bedak, Apr 21 '17 at 14:55

score 1 · Answer 1 · edited Jul 16 '22 at 01:13

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 });
}

edited Jul 16 '22 at 01:13

tony19

125,647
18
229
307

answered Apr 21 '17 at 16:55

Roy J

42,522
10
78
102

can you provide an example of using selectboxit with vuejs – sm12 Apr 22 '17 at 04:59
Not really; but see updated answer, and be sure to look at the JavaScript tab on the wrapper component page I linked. – Roy J Apr 22 '17 at 11:23
I got the plugin style to work when I put $(...).selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false }); in updated: hook. But the selectChange method which was firing when a different option is selected is not working now. How can I fix this? – sm12 Apr 22 '17 at 19:23
Is there any way you could put together a runnable snippet or fiddle? It would be worth putting up a new question. – Roy J Apr 22 '17 at 19:51

score 0 · Answer 2 · edited Jul 16 '22 at 05:40

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/

SelectBoxIt jq plugin not working with Vue.js

2 Answers2