Extending the structure field in a plugin

Plugins
, ,
1

Hi!

I am trying to define a panel field in a plugin that extends the structure field. My goal is to predefine one field that is a multiselect that queries it’s options from a specific page (for a relation-type connection) and lets the user add fields to the structure in the blueprint. I came pretty far, but now I’m stuck with extending the structure field.
In the moment, the blueprint of my field looks like this:

works:
        label: Works
        type: relation #<--- this is the type i defined, extending the structure field
        fields:
            foreignKey:
                label: Work
                type: multiselect
                min: 1
                max: 1
                options: query
                query:
                    fetch: site.find('works').childrenAndDrafts
                    text: "{{ page.title }}"
                    value: "{{ page.autoid }}"
        validate:
          unique: works
        relatedContentType: work
        relatedPage: works
        relatationField: author

I know that the first field inside the structure will always be “foreignKey” of type multiselect with the given options and the query, so i want to move that into the definition of my field. With the help of this by @sts topic i now came so far:

The index.php of my plugin looks like this:

use Kirby\Cms\Form;
...
    'fields' => function () {
                    return [
                        'foreignKey' => [
                            'type' => "multiselect",
                            'min' => 1,
                            'max' => 1,
                            'options' => "query",
                            'query' => [
                                'fetch' => "site.find('students').childrenAndDrafts",
                                'text' => "{{ page.title }}",
                                'value' => "{{ page.autoid }}"
                            ],
                        ]
                    ];
                },
                'validations' => [
                    'unique' => 'foreignKey',
                ]

And my Vue Component like this:

<template>
    <k-structure-field
        :label="label"
        :fields="formFields"
        :endpoints="endpoints"
    ></k-structure-field>
</template>

<script>
export default {
    props: {
        label: String,
        endpoints: Object
    },
    computed: {
        formFields() {
            var fields = {};
            var field = {};
            fields = {
                foreignKey: {
                    type: "multiselect",
                    min: 1,
                    max: 1,
                    options: "query",
                    query: {
                        fetch: "site.find('students').childrenAndDrafts",
                        text: "{{ page.title }}",
                        value: "{{ page.autoid }}"
                    },
                    required: false,
                    icon: "title"
                },
            }
            Object.keys(fields).forEach(name => {
                field = fields[name];
                field.section = this.name;
                field.endpoints = {
                    field: this.endpoints.field + "+" + name,
                    section: this.endpoints.section,
                    model: this.endpoints.model
                };
                fields[name] = field;
            });
            return fields;
        }
    }
}
</script>

<style lang="scss">
</style>

But i get this error:

this.options.map is not a function

To be honest I am a bit lost in the way the extending of the structure works, so if anyone could point me in the right direction how to get this working a would be very grateful.