SelectBoxIt jq 插件不适用于 Vue.js答案

【问题标题】：SelectBoxIt jq plugin not working with Vue.jsSelectBoxIt jq 插件不适用于 Vue.js
【发布时间】：2017-04-21 14:37:28
【问题描述】：

一个页面中有很多动态生成的选择框。我想应用 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 一起使用？谢谢

【问题讨论】：

看看你的浏览器控制台
@BelminBedak 我应该在控制台中寻找什么？
错误并在这里发布
顺便说一句，尝试将其包装在 jQuery 文档就绪函数中，然后将其放入挂载的钩子中。
@BelminBedak 我没有收到任何错误

标签： javascript jquery jquery-plugins vue.js selectboxit

【解决方案1】：

您应该创建一个wrapper component。你就是这样make VueJS and jQuery play nice。

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

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

【讨论】：

你能提供一个在 vuejs 中使用 selectboxit 的例子吗
不是真的；但请查看更新的答案，并确保查看我链接的包装器组件页面上的 JavaScript 选项卡。
当我把 $(...).selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false });在更新：钩子。但是在选择不同的选项时触发的选择加管方法现在不起作用。我该如何解决这个问题？
有什么办法可以组合一个可运行的 sn-p 或 fiddle 吗？提出一个新问题是值得的。

【解决方案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/

【讨论】：