Error using structure field in k-form

Kirby 3 Questions 🤔
,
1

Writing on my first panel field extension I reached a point where I want to use a structure field inside the k-form component.
Below I paste a reduced demo code for my formfield component integrated in latest kirby version and pluginkit version.

I can see the structure field, and click the add button.
As I start filling the formfields, the orange “Changes” bar appears.
But as soon as I click the add button to finish the structure entry, I get a modal error showing “e is null” and the following errors in the dev console:

XHR POST http://localhost:8000/api/pages/sandbox/fields/mynewsletter/validate
[HTTP/1.1 404 Not Found 657ms]
Object { status: “error”, message: “No route found for path: "validate" and request method: "POST"”, code: 404, exception: “Exception”, key: null, file: “/kirby/src/Http/Router.php”, line: 154, details: , route: “pages/([a-zA-Z0-9\.\-%= \+\@\(\)]+)/fields/([a-zA-Z0-9\.\-%= \+\@\(\)]+)(?:/(.*))?” }
app.js:1:33497
TypeError: e is null
yt http://localhost:8000/media/panel/de8a4e99bb5f22ded6d686cfd948274b/js/app.js:1
Re http://localhost:8000/media/panel/de8a4e99bb5f22ded6d686cfd948274b/js/vendor.js:23
[… shortened the stack …]
b http://localhost:8000/media/panel/de8a4e99bb5f22ded6d686cfd948274b/js/vendor.js:23
p http://localhost:8000/media/panel/de8a4e99bb5f22ded6d686cfd948274b/js/vendor.js:23
b http://localhost:8000/media/panel/de8a4e99bb5f22ded6d686cfd948274b/js/vendor.js:23
app.js:1:301845

Below is the code of my component, that behaves like this.
Do you have a clue on how to solve this error?
I cannot find any examples for usage of k-form with structure field.

<template>
  <k-field :label="label" v-bind="$props" class="k-newsletter-signup-field">
    <template>
      <k-form v-model="modelMain" @input="emitInput" :fields="formMain" />
    </template>
  </k-field>

</template>

<script>

export default {
  components: {
  },
  props: {
    value: {
      type: Object,
      default: function () {
        // If the field is inside a Structure, it'll have an `undefined` initial
        // value, so this gives a valid default value.
        return {
          active: false,
          contactlist: '',
          segment: '',
          source: '',
          metadata: [],
        }
      }
    },
    endpoints: Object,

    width: String,
    label: String,
    help: String,
    disabled: Boolean,
    required: Boolean,
  },
  data: function () {
    return {
      data: this.value,
      screen: 'main'
    }
  },
  computed: {
    modelMain: {
      get: function () {
        return {
          active: this.data.active,
          metadata: this.data.metadata,
        }
      },
      set: function (input) {
        Object.assign(this.data, input)
      }
    },
    formMain: function() {
      const form = {
        active: {
          label: 'Anmeldung aktiv',
          type: 'toggle'
        },
        metadata: {
          label: 'Kontakt Metadatenfelder',
          type: 'structure',
          endpoints: this.endpoints,
          fields: {
            active: {
              label: 'Aktiv',
              type: 'toggle',
            },
            field: {
              label: 'Feld',
              type: 'select',
              required: true,
              options: [{value: 1, text: 1},{value: 2, text: 2},{value: 3, text: 3},],
            },
            label: {
              label: 'Feldbeschriftung',
              type: 'text',
              required: true,
            }
          }
        }
      };
      return form;
    },
  },
  methods: {
    emitInput: function () {
      this.$emit('input', this.data);
    },
  },
  watch: {
    value: function (value) {
      this.data = Object.assign({}, value)
    }
  }
};
</script>

<style lang="scss">
/** put your css here **/
</style>
2

I have not used a structure field myself in that context. It is a rather complex field under the hood.
The error message is pretty specific. It says the route …yourfield/validate was not found.

See Vue component / PHP Field definition

Have you tried setting up this route?

Edit: I guess the key is to understand the structure fields php part and implement what you need in your field.

The following setup works for me, but a lot of the structure fields magic is lost and needs to be added manually.

// index.php
'props' => [
    'value' => function ($value = []) {
        return Yaml::decode($value);
    }
],
'api' => function () {
    return [
        [
            'pattern' => 'validate',
            'method'  => 'ALL',
            'action'  => function () {
                // validate the fields
                return [];
            }
        ]
    ];
},
'save' => function ($value) {
    return Yaml::encode($value);
}

// index.js
props: {
  endpoints: Object,
  value: Object
},
template: `
  <k-fieldset
  v-model="contact"
  @input="input"
  :fields="fields" />
  `,
data() {
  return {
    contact: {},
    fields: {
      name: {
        label: 'Your Name',
        type: 'text',
        required: true
      },
      email: {
        label: 'Email Address',
        type: 'email',
        required: true
      },
      address: {
        label: 'blabla',
        type: 'structure',
        endpoints: this.endpoints,
        columns: {
          one: {
            label: 'one',
            type: 'text'
          },
          two: {
            label: 'two',
            type: 'text'
          }
        },
        fields: {
          one: {
            label: 'one',
            type: 'text',
          },
          two: {
            label: 'two',
            type: 'text'
          }
        }
      }
    }
  }
},
methods: {
  input() {
    this.$emit('input', this.contact);
  }
},
watch: {
  value: {
    immediate: true,
    handler (newVal) {
      this.contact = Object.assign({}, newVal)
    }
  }
}