Custom panel field button, fetch plugin api

Kirby 3 Solved ✅
, ,
1

Hi everyone,

I’m trying to build a custom panel field which prints a button.
On button click, i’d like to fetch data from my plugin api.
But i’m facing 2 issues:

  • I can’t get component props formatted when passing query syntax to field

plugin index.php

Kirby::plugin('kaliel/kirby-zoho', [
    'options' => ['cache' => true],
    'api' => [
    'routes' => [
        [
            'pattern' => 'profs',
            'action' => function () {
                return ['hello' => 'world'];
            }
        ]
    ]
],
    'routes' => require_once 'config/routes.php',
    'fields' => require_once 'config/fields.php'
]);

blueprint.yml

        fields:
          generateProfs:
            type: generateProfs
            label: Click here to generate teachers
            url: {{site.url}}/api/profs

And here is my vue component:

generateProfs.vue

<template>
  <k-button @click="onClick(url, $event)">{{ label }}</k-button>
</template>

<script>
export default {
  props: {
    label: String,
    url: String
  },
  methods: {
    onClick: (url, event) => {

      /**
       * url is not formatted here, got :
       * {{site.url}}/api/profs
       */
      console.log(url);

      /**
       * fetch api
       * Got Kirby\\Exception\\PermissionException
       * with message: "Unauthenticated"
       */
      fetch('../api/profs').then(response => {
        return response.json();
      }).then(console.log);
    }
  }
};
</script>

<style>

</style>

My second issue is that when i hard code the request url, i get and Unauthorized exception from fetching url. But since, i’m logged in the panel, i don’t know why this occurs.

Finally, is there a better way to make api calls from Vue components ?

Thanks.

2

Guess you are just sending this as string from your php?

To make a request to the API, use this.$api.get() or this.$api.post() with the endpoint as parameter.

3

The string url is set on the blueprint, but yes, i’ll try from php.

Sorry but $api is not available from component. When i debug “this” in methods i got the window object :confused:

<template>
  <k-button-native @click="onClick(url, $event)">{{ label }} label ok</k-button-native>
</template>

<script>
export default {
  props: {
    label: String,
    url: String
  },
  methods: {
    onClick: (url, event) => {

      /**
       * TypeError: Cannot read properties of undefined (reading 'get')
       */
      const result = this.$api.get('https://getkirby.com/');
      console.log(result);

      /**
       * url is not formatted here, got :
       * {{site.url}}/api/profs
       */
      console.log(url);

      /**
       * fetch api
       * Got Kirby\\Exception\\PermissionException
       * with message: "Unauthenticated"
       */
      fetch('../api/profs').then(response => {
        return response.json();
      }).then(console.log);
    }
  }
};
</script>
4

Should be, see here: kirby3-janitor/Janitor.vue at f00fb2d2d5d1cad9fdd6d0e9f3f9bb508b97a5e1 · bnomei/kirby3-janitor · GitHub

5

Ok, i got it working by removing arrow functions and using old syntax.

Thank you @texnixe :slight_smile:

6

I know this topic has been marked as resolved but just adding this incase someone else see’s it and is stuck.

When using methods in vue the function doesnt need to be an arrow function, the following will suffice:

methods: {
     method_name() {
          return 'whatever'
     },
     method_name: function() {
         return 'whatever'
     }
}
1 Like