How to get k-pagination work inside panel field plugin

The CMS Questions
1

I’m trying to use the k-pagination inside my panel field plugin, but since I’m new to Vue (and not the best on js) I have a hard time getting it to work. I have followed the docs and manage to get the total prop right and a items array that looks like the attached image when console.log it. I guess I don’t get the :key=“item.id” part on the list right because all the 61 items are visible.

15
Skärmklipp 2019-08-23 15.20.15.png1740×944 100 KB

My template inside index.js looks like this:

template: `
        <k-field class="k-elastic-field" :label="label">
          <k-input
            v-model="query"
            type="text"
            theme="field"
            icon="search"
          />

          <div class="k-elastic-field-results" v-if="query.length">
            Results:
            <ul class="m-grid m-grid--cards">
              <li class="m-grid__item" v-for="item in results" :key="item.id">
                <img :src="item._source.imageUrl">
                <div>{{ item._source.name }}</div>
              </li>
            </ul>

            <k-pagination
            align="center"
            :details="true"
            :page="1"
            :total="total"
            :limit="12"
            @paginate="fetch" />
          </div>
        </k-field>
      `
2

In the docs the fetch method looks like this:

fetch(pagination) {
      return this.$api
        .get('/projects.json', { page: pagination.page })
        .then(response => {
          this.items = response.data;
          this.total = response.total;
        });
    }

I don’t understand the second argument for the .get, what is the { page: pagination.page } for? Is it to tell the pagination component which page it should show?
My fetch method looks like this at the moment:

fetch(pagination) {
          return this.$api.get(this.endpoints.field + '/search?q=' + this.query).then(response => {
            this.results = response[0];
            this.total = response[0].length;
            console.log(this.results);
          });
        }

this.results give me the array I wrote about above. But what should I use as second argument in my .get function? If I use the same { page: pagination.page } the pagination component disappear.

4

I think I starting to understand this a little bit more now, but apparently not fully because it still does not work completely. Can someone please help my connect the missing dots?.

My index.php looks like this:

<?php
use Elasticsearch\ClientBuilder;
Kirby::plugin('demo/search', [
  'fields' => [
    'elastic' => [
      // each field can have a custom
      // api function that returns custom api routes
      // for the field. Those are scoped and
      // can be used for pretty much anything in the backend.
      'api' => function () {
        return [
          [
            'pattern' => 'search',
            'action' => function () {
              // put your elastic search here.
              // $query = $this->field()->value();
              $query = get('q');
              $index = esIndex();
              $esClient = esClient();
              $params = [
                'size' => 100,
                'index' => esIndex(),
                'type' => 'product',
                'body' => [
                  'query' => [
                    'simple_query_string' => [
                      'fields' => ['description', 'description.english^10', 'description.swedish^10', 'description.ngram^10', 'name', 'name.english^100', 'name.swedish^100', 'name.ngram^100', 'brand^1000', 'merchant^1000'],
                      'quote_field_suffix' => '.exact',
                      'query' => $query,
                      'default_operator' => 'AND'
                    ]
                  ]
                ]
              ];
          
              $search = esClient()->search($params);
              $results = CleanProductsArray($search['hits']['hits']);
              return [
                $results
              ];
            }
          ]
        ];
      }
    ]
  ]
]);

And my index.js like this:

panel.plugin('demo/search', {
  fields: {
    elastic: {
      props: {
        label: String,
        value: String,
        endpoints: Object
      },
      data() {
        return {
          query: this.value,
          results: [],
          total: 0
        };
      },
      watch: {
        value(value) {
          this.query = value;
        },
        query: {
          handler() {
            this.$emit('input', this.query);
            this.search();
          },
          immediate: true
        }
      },
      // created() {
      //   this.search({ page: 1 });
      // },
      methods: {
        search(pagination) {
          if (this.query.length === 0) {
            this.results = [];
            return;
          }

          this.$api
            .get(this.endpoints.field + '/search?q=' + this.query)
            .then(response => {
              this.results = response[0];
              this.total = this.results.length;

              console.log(this.results);
              console.log(this.total);
              console.log(this.pagination);
            });
        }
      },
      template: `
        <k-field class="k-elastic-field" :label="label">
          <k-input
            v-model="query"
            type="text"
            theme="field"
            icon="search"
          />

          <div class="k-elastic-field-results" v-if="query.length">
            Results:
            <ul class="m-grid m-grid--cards">
              <li class="m-grid__item" v-for="item in results" :key="item._id">
                <img :src="item._source.imageUrl">
                <div>id:<br>{{ item._id }}</div>
                <div>brand:<br>{{ item._source.brand }}</div>
                <div>name:<br>{{ item._source.name }}</div>
              </li>
            </ul>

            <k-pagination
            align="center"
            :details="true"
            :page="1"
            :total="total"
            :limit="12"
            @paginate="search" />
          </div>
        </k-field>
      `
    }
  }
});

The result is that I get a list of products from Elasticsearch which show up in the panel. But the pagination component is still “disconnected” from the list. console.log(this.pagination) give me undefined, and all the products are showing, not just 12. Feels like I’m missing something simple…