Updating and displaying values for complex custom Panel fields

I have followed the @texnixe Cookbook Recipe for building a custom field in a Kirby plugin, but I’m trying to apply it to other types of fields, e.g. tags, toggle, using the UI Kit <k-tags-field>, <k-toggle-field>, but I’m having some issues.

[1] When I save on a new page (no value set), the fields saves fine into the content.txt file. If I update the field, before or after page reload, it does not update the values in content.txt. They remain unchanged as they were set the first time.

[2] When I reload the page, the front-end controls/UI (tags, toggles) don’t display the values as saved in the content.txt file - they are empty as if never set.

Can you confirm, that I should be able to use <k-tags-field> and <k-toggle-field> with props and $emit('input') like you do with the text field example, with or without formatting the data as required using methods in the Vue component, or is that not going to work for more complex fields?

Should I rather duplicate the entire Tags Vue component or Toggle Vue component components from Kirby src, and make adjustments to those? Concern about this approach is keeping up with changes to those fields in Kirby releases vs. if I use them with <k-tags-field> and <k-toggle-field> they will just inherit from core.

Here is a link to a GitHub repo so you can see this in context. I’ve been trying different things to get this to work, so some of the field components have deviated from how you set it up in the Cookbook Recipe, but previously it was very closely aligned.

I’m very comfortable with Vue and PHP, and use them on a daily basis in my profession so I’m fine with the fundamentals here.

Thanks in advance for your help, and let me know if you have any questions etc.


Doh! The issue was that the names I gave my custom fields in the blueprints had hyphens ("-") instead of underscores ("_"). What a noob!