Vue.js Cannot read properties of undefined (reading 'router') error

Question

I'm new to Vue.js and I have created one simple form for the user and storing data using API.

On submit I'm calling this function:

setup(props, { emit }) {
    const blankData = {
      customer: '',
      template: '',
      rate: '',
      property_from: '',
      property_to: '',
      move_date: '',
      num_days: '',
      token: '',
      details: '',
      customer_options: [],
      template_options: [],
      rate_options: [],
      property_from_options: [],
      property_to_options: [],
    }

    const userData = ref(JSON.parse(JSON.stringify(blankData)))
    const resetuserData = () => {
      userData.value = JSON.parse(JSON.stringify(blankData))
    }
    const toast = useToast()

    const onSubmit = () => {
      store.dispatch('app-user/addUser', userData.value)
        .then(
          response => {
            if (response.status === 1) {
              this.$router.push({ name: 'edit-user', params: { id: 10 } })
            }

            toast({
              component: ToastificationContent,
              props: {
                title: response.message,
                icon: response.toastIcon,
                variant: response.toastVariant,
              },
            })
          },
          error => {
            console.log(error)
          },
        )
    }

    const {
      refFormObserver,
      getValidationState,
      resetForm,
    } = formValidation(resetuserData)

    return {
      userData,
      onSubmit,
      refFormObserver,
      getValidationState,
      resetForm,
    }
  },

And trying to redirect the user to the edit page after user creation but I'm getting this error and not redirecting:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'router')

I have tried with this stackoverflow answer but getting same error:

const onSubmit = () => {
    const self = this
    store.dispatch('app-user/addUser', userData.value)
    .then(
        response => {
            if (response.status === 1) {
                self.$router.push({ name: 'edit-user', params: { id: 10 } })
            }
        },
        error => {
            console.log(error)
        },
    )
}

Any idea what I'm doing wrong in my code?

What is this referring to in that context? Where is your onSubmit function defined, and where is it being used? Need more context. — Decade Moon
– Decade Moon, Commented Nov 22, 2021 at 6:25

Insung Park · Accepted Answer · 2021-11-22 06:50:41Z

2

I think this might be help

router with composition api https://next.router.vuejs.org/guide/advanced/composition-api.html

edited Nov 22, 2021 at 6:50

answered Nov 22, 2021 at 6:29

Insung Park

4394 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lumos Over a year ago

Yes. I'm using Vuexy - Vuejs theme.

Insung Park Over a year ago

I updated answer after you updated question

Decade Moon · Accepted Answer · 2021-11-22 06:35:54Z

1

You're using Vue 3 and a setup function; there is no this in a setup function.

See Accessing the Router and current Route inside setup.

Untested, but probably something like this will work:

setup() {
  const router = useRouter()

  const onSubmit = () => {
    // ... code omitted ...

    router.push({ name: 'edit-user', params: { id: 10 } })
  }

  return {
    onSetup,
    // other stuff...
  }
}

answered Nov 22, 2021 at 6:35

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Collectives™ on Stack Overflow

Vue.js Cannot read properties of undefined (reading 'router') error

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related