How to Execute JavaScript Function on Button Click in VueForm Builder Custom Element?

[L150n]

In the VueForm Builder configuration file (builder.config.js), I'm defining a custom element called "Alert button" (alertbutton). This button is intended to trigger an alert message when clicked. However, I'm unsure how to include the JavaScript function or code snippet that should execute upon clicking the button.

Here's a snippet of the current configuration:

// builder.config.js

export default {
  element: {
    types: {
      alertbutton: {
        label: 'Alert button',
        category: 'static',
        rules: [],
        schema: {  
          buttonLabel: 'Alert',
          type: 'button',      
         // Here I want to include a function or code snippet that executes when the button is clicked like alert("Test")
        },
        sections: {
          // ...
        },
        separators: {
          // ...
        },
        operators: [
          // ...
        ],
      }
    }
  }
}

Could you please provide guidance on how to include a JavaScript function or code snippet that executes when the button is clicked within the VueForm Builder custom element configuration?
i need to know one more point that can i add
buttonLabel: 'Alert',
type: 'button',
@click:'test' //rather than onclick

Thank you for your assistance!

[adamberecz]

Here's an example how you can subscribe to element events when using schema:
(schema tab) https://vueform.com/docs/subscribing-to-events#subscribing-to-events-1

So the syntax is:

// builder.config.js

export default {
  element: {
    types: {
      alertbutton: {
        label: 'Alert button',
        category: 'static',
        rules: [],
        schema: {  
          buttonLabel: 'Alert',
          type: 'button',      
          onClick() {
            alert('Test')
          }
        },
        // ...
      }
    }
  }
}

[L150n]

It's not working, but this works onclick: 'alert("test")'. Thank you for your quick response.

[adamberecz]

We had an issue fixed around button click event in @vueform/vueform: '1.9.0' - if you have a lower version try upgrading. The benefit of having onClick (which is a Vueform event) vs onclick (which is the native DOM event) is that you receive params like form$ or el$ in onClick which can be useful if you want to interact with the form / element in the event handler.

[L150n]

If I use this onClick() in a Vue page, it works. For example:

<template>
  <Vueform v-bind="vueform"/>
</template>

<script setup>
import { ref } from 'vue'

const vueform = ref({
  schema: {
    primaryButton: {
      type: 'button',
      buttonLabel: 'Button',
      onClick(){
        alert("Test")
      }
    },
  },
})
</script>

However, if I use it in a custom element like above in the builder.config.js, In setting the export schema object in the builder won't show onClick, like this:

<template>
  <Vueform v-bind="vueform" />
</template>

<script>
export default {
  data: () => ({
    vueform: {
      schema: {
        primaryButton: {
          type: 'button',
          buttonLabel: 'Button',
        },
      },
    }
  })
}
</script>

[adamberecz]

Are you sure you re-added you button element to the form after adding the onClick to its schema? Updating the element type won't change the already added element's schama. It seems to be working for me (formatting might be off a bit though).