Using Query Parameters or URL Parameters

[johannschopplich]

Using Query Parameters or URL Parameters

[johannschopplich]

You will have to implement a search component on the frontend-side yourself and fetch data from a custom backend API route. Or use the usePage() hook and embed the data on your page (not recommended, but possible).
Query parameters will probably not be needed in your reactive search component.

You may hit up Google with search terms like “build vue search component” etc. Hope you will find something useful!

[degoya]

Thanks for your reply, the reactive part is not really a problem with a custom route, but i need the parameters in the url to make the searchpage shareable. Can't the route be changed to give the URL parameters to the controller? would you mind to maybe provide me a example? i'm new to both kirby and vue :)

[johannschopplich]

This setup may be a bit too complex if you're new to Kirby and Vue. I recommend learning a bit of both and then revisit this boilerplate. Since both are tightly integrated into another.

Sorry, but I can't give you support for such a specific request.

Edit: You'll have to use the useRouter() hook. You can then parse the route and extract the query. You may take a look into the Vue Router docs.

[degoya]

i solved it by using

  $data = [
      'q' => get('q'),
    ];
  return page($page)->render($data);

insted of

$html = kirby()->render(page($page));
return $html;

inside the routes.php of the router plugin to pass the parameters to the controller.
now i get the parameters in the controller but the page is not delivered anymore :( i only receive the json.

when i get the parameters via the Vue Router as you told me they are only available in the Vue Component but not in the Controller. Is there a way to get the parameters directly inside the controller?

[degoya]

Solved the problem by using this.route.query.q in my vue and doing the search via the api with Vue.

used this is the search vue

...

 <input
    type="text"
    v-model.trim="search"
    placeholder="search ..."
    @keyup="getSearchResult"
/><br />
<ul>
    <li v-for="result in results" :key="result.id">
        {{ result.title }}
    </li>
<ul>

...

data() {
    return {
      results: [],
      search:  this.route.query.q
    };
  },
methods: {
    getSearchResult() {
      if(this.search) {
        fetch("/search/"+this.search.toLowerCase())
          .then(response => response.json())
          .then(res => {
            if (this.search) {
              this.results = res.results.filter(results =>
                results.title.toLowerCase().includes(this.search.toLowerCase())
              );
            } else {
              this.results = res.results;
            }
          });
      }
    }
  },

i've added this to the routes.php

    /**
     * Return JSON-encoded search data
     */
    [
        'pattern' => 'search/(:any)',
        'language' => '*',
        'action' => function ($any,...$args) {
            $query   = $any;
            if ($query) {
              $results = site()->search($query, 'title|text');
            }
            foreach ($results as $result):
                $results_array[] = array(
                    'url'=>$result->url(), 
                    'title'=>$result->title()->value()
                  );
            endforeach;
            $data = [
                'query' => html($query),
                'results' => $results_array,
              ];


            return \Kirby\Data\Json::encode($data);      
        }
    ],

maybe it's helpful for someone