Vue instance available in click event in schema?

[lsbyerley]

I'd like to call a method or emit an event from a click even in the schema but this is undefined. Is there a way to do this with this plugin? Example below

  data() {
    return {
      schema: [
        {
          type: 'text',
          label: 'Email',
          name: 'email',
          validation: 'bail|required|email',
        },
        {
          type: 'password',
          label: 'Password',
          name: 'password',
          validation: 'required',
        },
        {
          component: 'div',
          class: 'flex align-center justify-between',
          children: [
            {
              type: 'submit',
              label: 'Login',
            },
            {
              type: 'button',
              name: 'forgot-password',
              label: 'Forgot Password',
              on: {
                click() {
                  console.log(this); //undefined
                },
              },
            },
          ],
        },
      ],
    };
  },

[gahabeen]

Hey @lsbyerley, sorry for the delay. Been off-grid last week!
I'll have a look.

[hmaesta]

@gahabeen This one was not opened by me 😅

[gahabeen]

@gahabeen This one was not opened by me 😅

Sorry about that ping ;P

[gahabeen]

@lsbyerley So far there is no context bound to the event function.

Feel free to dive into it to add this feature if you want to.
https://github.com/gahabeen/vue-formulate-extended/blob/master/src/features/form-events.js

Pull requests are always appreciated.
I'm also here if you've got any question.

[cjcrawford]

@lsbyerley if you're using ES6 you can simply change your syntax slightly to get access to your vm (this) if that's what you're after...

data() {
    return {
      schema: [
        ...
        {
          component: 'div',
          class: 'flex align-center justify-between',
          children: [
            ...
            {
              type: 'button',
              name: 'forgot-password',
              label: 'Forgot Password',
              on: {
                click: (event) => {
                  console.log(this); // VueComponent
                  console.log(event); // MouseEvent
                },
              },
            },
          ],
        },
      ],
    };
  },