不使用SelectBoxIt jq插件的Vue.js

Question

一个页面中有许多动态生成的复选框。我想应用jquery selectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/)插件。我使用的是Vue js。我该把它放哪儿

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

为了将插件与select元素连接起来？应用于复选框的类是cl_v。我已经将上面的代码放置在创建的中：、挂载：和 placed：。但这不起作用。如何在Vue.js中使用这个插件？谢谢

Answer 1

您应该创建一个包装组件。这就是你让VueJS和jQuery表现得很好的方式。

如果您的selectBoxIt所需的唯一工作内容是上面的调用，那么您只需要下面的mounted部分：

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

Answer 2

请查看正式文件：包装组件

下面是示例代码：

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/