Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

avishkaMe's avatar

TypeError: Cannot read property '$emit' of undefined

I want to call to a method in my parent component within my child component.

so I used an event for that. but I can emit the event using,

this.$emit('event')

it shows an error in the console saying, TypeError: Cannot read property '$emit' of undefined

how do I fix this?

0 likes
7 replies
tykus's avatar

this is undefined; where are you trying to use it, in the script or in the template?

tykus's avatar

Very strange, can you show the relevant code?

avishkaMe's avatar
User.register(newUser).then((data) => {
        if (data.data.user) {
          this.$emit('event');
          toast.add({
            severity: "success",
            summary: "Success Message",
            detail: "User Registered",
            life: 3000,
          });
        } else {
          toast.add({
            severity: "error",
            summary: "Error Message",
            detail: data.data[0],
            life: 3000,
          });
        }
      });

I just want to close the parent sidebar after registering.

tykus's avatar

You need to share the wider context of the Vue component so we can understand what this should be.

avishkaMe's avatar
<script>
import { Form, Field } from "vee-validate";
import * as Yup from "yup";
import User from "../../../apis/User";
import { useToast } from "primevue/usetoast";

export default {
  components: {
    Form,
    Field,
  },

  setup() {
    const toast = useToast();

    const schema = Yup.object().shape({
      name: Yup.string().required("Name is required"),
      email: Yup.string()
        .required("Email is required")
        .email("Email is invalid"),
      password: Yup.string()
        .min(8, "Password must be at least 8 characters")
        .required("Password is required"),
      password_confirmation: Yup.string()
        .oneOf([Yup.ref("password"), null], "Passwords must match")
        .required("Confirm Password is required"),
    });

    const onSubmit = (values) => {
      // display form values on success
      console.log(values);
      let newUser = {
        name: values.name,
        email: values.email,
        password: values.password,
        password_confirmation: values.password_confirmation,
      };

      User.register(newUser).then((data) => {
        console.log(data);
        if (data.data.user) {
          this.$emit('event');
          toast.add({
            severity: "success",
            summary: "Success Message",
            detail: "User Registered",
            life: 3000,
          });
        } else {
          toast.add({
            severity: "error",
            summary: "Error Message",
            detail: data.data[0],
            life: 3000,
          });
        }
      });
    };

    return {
      schema,
      onSubmit,
    };
  },
};
</script>

Please or to participate in this conversation.