Panel Dialog Submit - Dispatch Vuex Events

Kirby 3 Solved ✅
1

Hi there,

I´m currently following the reference and advanced panel area recipe and was wondering how I am able to pass an vue(x) event after submitting my dialog?

The reference states, that it is possible by returning an array, but I can´t figure it out, how to get this accomplished.

How does the returning array has to look like from the dialog submit?

Kirby::plugin('yourname/todos', [
  'areas' => [
    'todos' => function ($kirby) {
      return [
        'dialogs' => [
          'todos/create' => [
            // ...

            // the submit event is creating a POST route at
            // `/panel/dialogs/{pattern}`;
            // the submit button of the dialog is automatically
            // wired to fire the POST request with the form
            // data or whatever data the dialog provides
            'submit' => function () {
              $array = [
                 'event' => 'vuex event' ?,
                 'data' => 'data'
              ];
              return $array;
            }
          ]
        ]
      ];
    }
  ]
]);

And how to access the returned data in a Vue single file component then?

Thanks for the help.

2

Ok got the answer by myself :wink:

return [
 'event' => 'site.update',
 'data' => $some_data
];

in Vue js Component:

created() {
   this.$event.$on('site.update', (response) => { 
     /*do what you want with response */
   });
}
3

Hey @PatrickFox, I’m actually trying to achieve the same thing, however I didn’t manage to get your approach working for me as this.$event is undefined for me in the created() method. Is the $event property set somewhere else in your code?

4

Ah sorry my Mistake it is called:

event"S" with an s :wink:

created() {
   this.$events.$on('site.update', (response) => { 
     /*do what you want with response */
   });
}