Hi forum
I’m new to Vue.js and try to extend kirby’s fields k-select-field
/k-multiselect-field
.
Basically, I’d like to reuse k-select-field
/k-multiselect-field
but I’d like to serve the available options
by a custom implementation.
This is what I did so far:
index.js
:
panel.plugin('steineri/kirby-plugin-feg-visp', {
fields: {
PCOEvent: {
extends: 'k-select-field'
}
}
});
config.php
<?php
Kirby::plugin('steineri/kirby-plugin-feg-visp', [
'fields' => [
'PCOEvent' => [
'props' => [
'options' => function () {
return [
['value' => 'abc', 'text' => 'Option A'],
['value' => 'xyz', 'text' => 'Option X']
];
}
]
]
]
]);
This is an excerpt of my test blueprint
:
content:
type: fields
fields:
title:
label: Name
type: text
pcoSource:
type: PCOEvent
label: pcoSource
Categories:
label: Select
type: select
options:
abc: Option A
xyz: Option X
I observe these custom options getting successfully served to the panel. Apparently, the options are served in the exact same way for both, Select
and the extended field pcoSource
:
While field Select
works as expected, field pcoSource
is empty and the panel looks like this:
Finally, that’ how the generated HTML code looks like:
Do I miss something? Does extension/inheritance not work the way I imagine it does? Or is this related to the bug described here?
Thank you very much!