Question

Vue.js 无法读取未定义的属性（读取‘router’）错误

2021-11-22

6132

vue.js vue-router vuejs3

我是 Vue.js 的新手，我为用户创建了一个简单的表单并使用 API 存储数据。

提交时我调用此函数：

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,
    }
  },

并尝试在创建用户后将用户重定向到编辑页面，但出现此错误且未重定向：

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

我尝试使用此 stackoverflow 答案但出现相同错误：

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)
        },
    )
}

知道我的代码中做错了什么吗？

Answer 1

您正在使用 Vue 3 和设置函数；设置函数中没有 this 。

请参阅访问设置中的路由器和当前路由。

未经测试，但可能类似这样的方法可以工作：

setup() {
  const router = useRouter()

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

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

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

Answer 2

我认为这可能会有所帮助

带有 Composition API 的路由器 https://next.router.vuejs.org/guide/advanced/composition-api.html