Emitting an event from inside a custom input component

[iakhator]

Describe the feature

I have a custom input component as below that emits an event but it doesn't get to the parent.
I can comfortably do this in Vue Formulate without issue. I would like this feature if it can be added as our app heavily rely on
Global custom inputs

// ToggleCheck Component
<template>
  <div>
    <input
      :id="context.id"
      type="checkbox"
      :value="context._value"
      @input="handleChange"
    />
  </div>
</template>
<script>
export default {
  name: "ToggleCheck",
  emits: ["change"],
  props: {
    context: {
      type: Object,
      required: true,
    },
  },
  methods: {
    handleChange(event) {
      this.$emit("change", event);
    },
  },
};
</script>

inside the parent component I have this
<FormKit
      type="ToggleCheck"
      label="inputing"
      v-model="myNetworkToggle"
      @change="eventMethod"
    />

input config
inputs: {
    ToggleCheck: createInput(ToggleCheck)

  },

[justin-schroeder]

FWIW — Vue 3 doesn’t like arbitrary events being emitted from components. It will throw a warning statement when you do this. Related RFC here: vuejs/rfcs#204

[justin-schroeder]

@iakhator are you looking for node.input() to set the value of the input in your handleChange?

[justin-schroeder]

Descoping this for now. Because vue doesn't support arbitrary events anymore, I would suggest using FormKit's own event system with node.emit('eventName', data)' and node.on('eventName', yourCallback)`

[iakhator]

Thanks, @justin-schroeder, We found our way, and node.input() worked great for our use case.

[hassanbhattignomen]

@iakhator bro how you achieved it will you share your code with me