Question

页面中有许多动态生成的选择框。我想应用jquery selectBoxIt （http://gregfranko.com/jquery.selectBoxIt.js/）插件。我正在使用 Vue js 。我应该把它放在哪里

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

为了将插件附加到select元素？应用于选择框的类是 cl_v 。我已将上述代码放在已创建：，已安装：和已销毁：中。但它没有用。如何在Vue.js中使用该插件？感谢

Answer 1

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

如果您的aws ec2 authorize-security-group-ingress \ --group-id $SECURITY_GROUP_ID \ --protocol tcp --port 8080 --cidr 0.0.0.0/0工作所需的唯一内容是上述调用，您只需要这样的selectBoxIt部分：

mounted

Answer 2

请查看官方文件：Wrapper Component

这是示例代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是JSFiddle：https://jsfiddle.net/5qnqkjr1/131/

SelectBoxIt jq插件不能与Vue.js一起使用

2 个答案: