Can't set up k-pages-field in Block preview (this.endpoints.field error)

Hey!
I’m going a little crazy right now as I’m trying to set up a page field in a Block Preview using Kirby UI kit.
Unfortunately (I think) there are no docs for this and my attempts setting up the field fail and fail…

When I put <k-pages-field> in my .vue file,
I get the error message:
undefined is not an object (evaluating ‘this.endpoints.field’)

I know that the <k-pages-field> has a prop called “endpoints”, but not which object it expects here.

Does anyone happen to have a working example?

Thanks already!

giphy

I think I’ll use some kind of button that opens the block dialogue, so the user can just use that interface to select a page.

Maybe there will be more custom panel docs with the release of Kirby 4.

Do you know about the fields-block plugin?
If you’re just trying to “show the fieldset as the preview”, this might already do what you want. :slight_smile:

If you instead just want to show one of the page fields in your block fieldset, you might be able to just pass the <k-pages-field> components all its props by getting them from the panel:

<k-pages-field v-bind="field('pages-field-name')" />

All block previews, when registered via:

panel.plugin('my/plugin', {
  blocks: {
    // here
  }
})

Inherit some helper functions from the k-block-type component. One of that is the field(name, fallback) function which gives you the definition of a field in the block’s fieldset by name.

I haven’t actually tried the code above, but I think it could work. :slight_smile:


Otherwise try to console.log the field('pages-field-name') return value and see if the props are somewhere in there.

Hey rasteiner!

<k-pages-field v-bind="field('pages-field-name')" />

That did the trick for me!

I have heard of the fields-block plugin, but wanted to work on my own solution.

Thank you so much

1 Like

Final Code for me:

  <k-pages-field  @input="update({ jobtitlelink: $event })"  v-bind="field('jobtitlelink')" /> 
1 Like