Select2 pagination not working inside a Vue component

Viewed 166

I am doing some experiment using select2 js plugin inside a Vue js component, my mount() function looks like this

let self = this;
let url = self.context.recipes_autocomplete_url;
$(this.$refs.recipe_selection).select2({
  minimumInputLength: 2,
  ajax: {
    dataType: 'json',
    delay: 250,
    cache: true,
    url: function (params) {
      return url;
    },
    data: function (params) {
      let query = {
        term: params.term
      }
      return query;
    },
    processResults: function (data, params) {
      let more = (data.next != null)
      if (more)
        url = data.next;
      else
        url = self.context.recipes_autocomplete_url;

      return {
        results: data.results,
        pagination: {
          more: true
        }
      };
    }
  }
}).on("change.select2", function (e) {
  let data = $(self.$refs.recipe_selection).select2('data')

  if (data.length == 0)
    return

  // more staff here

});

My problem is with pagination, even if I hard code pagination:{more: true} the call to the next page never happen, I know this is not a common usage, but I am working on a legacy code, any idea?

I am using the last version of select2.js

0 Answers
Related