Calling a function in custom panel field when page is saved?

Hi, is there a function that can be called in a custom panel section/field when a page has been updated? Thanks

You mean a JavaScript event call?

Yes, subscribe to

this.$events.$on(“page.create”, this.yourmethodtobecalled)

Hi, yes it’s a js-event call that i needed. Where do i have to place this piece of code? In the ‘mounted’ method? In your example you use ‘page.create’, i presume that i can also call it ‘page.update’ . I tried to put this line of code in mij mounted-function, but it doesn’t seem to work.

this.$events.$on(“page.update”, this.yourmethodtobecalled)

Yes in mounted or created. And put one with $off in the destroyed method.

And try model.update

Yes, ‘model’ did the trick!

I have another question about this. I have custom panel field where i preview some textual stuff. But this field always dissapears when i adjust another inputfield on that page. Any idea how this comes?
Now with the model.update i can put the content back. But not when you ‘revert’ and not save the page. Is there for the ‘revert’ also a js-event-call?

That doesn’t sound right in the first place. Let’s rather try to get down to the issue than put bandaids on all event calls. Could you share your component code?

Hi, here is a stripped version. In mij case the problem is that the ‘message’ variable is set to empty when you change any input field on the page.


    Kirby::plugin('custom/preview-lot', [
        'fields' => [
            'preview-lot' => [
                'props' => [
                    'endpoints' => Object
                'api' => function() {
                    return [
                            'pattern' => 'preview-me',
                            'method' => 'POST',
                            'action' => function () {     
                                $html ='preview/calculate some stuff that is on the page or edited on the page';
                                return ['status' => 'success','html' =>$html];


panel.plugin('custom/preview-lot', {
    fields: {
        'preview-lot': {
            props: {
                endpoints: Object, 
                message: String
            mounted: function () {         
                this.$events.$on("model.update", this.updateme);
            methods: { 
                doPreview() {                     
                    this.$ + '/preview-me')
                        .then(function(response) {                         
                        .catch(function(error) {
            template: `
                <div class="message" v-html="message"></div> 

Ok, I think you could get rid of the whole api call and just work with a computed in your PHP definition that gets passed on as a prop to your Vue component.

Yes, that’s correct. The reason why i did it that way is that i need to adjust the content of the field when the page updates. Now i have to write the code twice. But now it works without bugs!

I guess it 's not possible to use site(), page(), parent() in the js file (so i still need the api call)?