Question

尝试使用jueery选择vue，问题是这个插件隐藏了我应用v-model的实际选择，所以当我选择一个值时，vue不会将其识别为select change事件和模型值未更新。

我已经看到Vue 1的某些解决方案无法与Vue 2一起使用

它显示当前值，但不知道如何设置以便模型值发生变化。

Vue.directive('chosen', {
 twoWay: true, // note the two-way binding
  bind: function(el, binding, vnode) {

Vue.nextTick(function() {
  $(el).chosen().on('change', function(e, params) {
    alert(el.value);
  }.bind(binding));
});
},
    update: function(el) {
// note that we have to notify chosen about update
// $(el).trigger("chosen:updated");
 }
  });

var vm = new Vue({
 data: {
   cities: ''
 }
 }).$mount("#search-results");

Answer 1

将jQuery插件集成到Vue 2中的首选方法是将它们包装在一个组件中。下面是一个包含在处理单个和多个选择的组件中的Chosen插件的示例。

Vue.component("chosen-select",{
  props:{
    value: [String, Array],
    multiple: Boolean
  },
  template:`<select :multiple="multiple"><slot></slot></select>`,
  mounted(){
    $(this.$el)
      .val(this.value)
      .chosen()
      .on("change", e => this.$emit('input', $(this.$el).val()))
  },
  watch:{
    value(val){
       $(this.$el).val(val).trigger('chosen:updated');
    }
  },
  destroyed() {
      $(this.$el).chosen('destroy');
  }
})

这是模板中使用的一个例子：

<chosen-select v-model='cities' multiple>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
  <option value="Denver">Denver</option>
</chosen-select>

<chosen-select v-model='cities2'>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
  <option value="Denver">Denver</option>
</chosen-select>

多次选择

Fiddle。

原始答案

此组件无法正确处理多个选择，但将其保留在此处，因为它是接受的原始答案。

Vue.component("chosen-select",{
  props:["value"],
  template:`<select class="cs-select" :value="value"><slot></slot></select>`,
  mounted(){
    $(this.$el)
      .chosen()
      .on("change", () => this.$emit('input', $(this.$el).val()))
  }
})

该组件支持v-model。这样你就可以在模板中使用它了：

<chosen-select v-model='cities'>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
</chosen-select>

这是你的小提琴updated。

Vue 2与Jquery选择

1 个答案: