Question

我想在Vuejs 2.x中使用带有ajax远程数据选项的select2。在vuejs.org website中找到了一个用作静态的select2组件的示例，但我需要为我的项目选择带this specific的2。如何将JSFIDDLE Example转换为使用键盘类型调用API的select2。

在jQuery Select2中使用此代码进行ajax调用：

$('.js-data-example-ajax').select2({
    ajax: {
      url: 'https://api.github.com/search/repositories',
      dataType: 'json'
      // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
    }
});

Answer 1

这是适合我的组件。参考他们的select2 https://vuejs.org/v2/examples/select2.html

我的问题是使用change.select2而不是在手表中触发change事件。 change事件导致无限循环。

您的回调/ ajax网址需要返回至少包含.id和.text属性的数据。请参阅此网址，了解格式正确https://select2.org/data-sources/formats

 <select2 v-model="member" name="member" callback="/res/member/select2.php" placeholder="Type a name"></select2>

Vue.component('select2', {
  props: ['name', 'value', 'required', 'callback', 'placeholder'],
  template: '<select :name="name" v-bind:class="{required: required}" class="vue-select2"></select>',
  watch : {
    value : function(value) {
      $(this.$el).empty().append('<option value="' + value.id + '">' + value.text +'</option>').trigger('change.select2');
    }
  },
  mounted:  function() {
    var that = this;
    var options = {
      width: '100%',
      placeholder: this.placeholder,
      allowClear: true,
      ajax: {
        url: this.callback,
        dataType: 'json'
      }
    };
    $(this.$el).select2(options);
    $(this.$el).on('change', function() {
      var item = $(this).select2('data')[0];
      that.$emit('input', item);

    });
  }
});

在Vuejs中使用ajax远程数据选项组件选择2

1 个答案: