javascript - TypeError: Object(...) 不是 Vue 中的函数
问题描述
我是 Vue 的新手，正在尝试处理表单。我正在制作一个 Web 应用程序来管理会议，为此我有一个多步骤表单来处理访客和主持人数据。当我单击提交按钮时，出现以下错误：-
TypeError: Object(...) is not a function
。我在stackoverflow上搜索了它，但没有得到太多线索。以下是我的代码：-
scheduleMeeting.js
<template>
<el-container>
<el-row>
<el-col class="desc" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<img src="../assets/meeting.svg" alt="meeting-image" class="image"/>
<div>
<h1 class="image-caption">Schedule Meetings With Ease!</h1>
<p class="image-sub-caption">Managing Meetings Now Much Easier</p>
<ul class="feature-list">
<li>Get instant meeting confirmation on email and mobile!</li>
<li>Schedule meeting from anywhere, anytime!</li>
<li>Schedule meeting using your mobile</li>
<li>Get check out email on your mailing address</li>
<li>Keep Track of All Visitors and Hosts</li>
</ul>
</div>
</el-col>
<el-col class="form-div" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-col class="steps">
<el-steps align-center class="steps" :active="active">
<el-step title="Step 1" description="Visitor Details"></el-step>
<el-step title="Step 2" description="Host Details"></el-step>
</el-steps>
</el-col>
<el-form ref="form" :model="form" label-width="120px">
<div :class="{'show':isVisitor, 'hide':!isVisitor}">
<el-input
name="visitorName"
v-validate="'required|alpha_spaces'"
prefix-icon="el-icon-user"
class="form-input"
placeholder="Visitor Name"
v-model="form.visitor.name"/>
<p v-if="errors.has('visitorName')" class="registration-error-message">
{{errors.first("visitorName")}}</p>
<el-input
name="visitorEmail"
v-validate="'required|email'"
prefix-icon="el-icon-message"
class="form-input"
placeholder="Visitor Email"
v-model="form.visitor.email"/>
<p v-if="errors.has('visitorEmail')" class="registration-error-message">
{{errors.first("visitorEmail")}}</p>
<vue-phone-number-input
v-validate="'required'"
name="visitorPhoneNo"
v-model="form.visitor.phone_no"
class="form-input"/>
<p v-if="errors.has('visitorPhoneNo')" class="registration-error-message">
{{errors.first("visitorPhoneNo")}}</p>
{{this.form.visitor.phone_no}}
<el-row>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-date-picker
v-validate="'required'"
name="visitorCheckIn"
class="form-input"
v-model="form.visitor.check_in"
type="datetime"
ref="check_in"
placeholder="Visitor Check In"/>
<p v-if="errors.has('visitorCheckIn')" class="registration-error-message">
{{errors.first("visitorCheckIn")}}</p>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-date-picker
v-validate="'required|after:check_in'"
name="visitorCheckOut"
class="form-input"
v-model="form.visitor.check_out"
type="datetime"
placeholder="Visitor Check Out"/>
<p v-if="errors.has('visitorCheckOut')" class="registration-error-message">
{{errors.first("visitorCheckOut")}}</p>
</el-col>
</el-row>
<el-row>
<el-button
@click="goToStepTwo"
class="button"
type="primary"
round>Next <i class="el-icon-arrow-right"></i>
</el-button>
</el-row>
</div>
<div :class="{'show':!isVisitor, 'hide':isVisitor}">
<el-input
name="hostName"
v-validate="'required|alpha_spaces'"
prefix-icon="el-icon-user"
class="form-input"
placeholder="Host Name"
v-model="form.name"/>
<p v-if="errors.has('hostName')" class="registration-error-message">
{{errors.first("hostName")}}</p>
<el-input
name="hostEmail"
v-validate="'required|email'"
prefix-icon="el-icon-message"
class="form-input"
placeholder="Host Email"
v-model="form.email"/>
<p v-if="errors.has('hostEmail')" class="registration-error-message">
{{errors.first("hostEmail")}}</p>
<vue-phone-number-input
name="hostPhoneNo"
v-validate="'required'"
v-model="form.phone_no"
class="form-input"/>
<p v-if="errors.has('hostPhoneNo')" class="registration-error-message">
{{errors.first("hostPhoneNo")}}</p>
<el-button
icon="el-icon-arrow-left"
plain
@click="goToStepOne"
class="button"
round>Back
</el-button>
<el-button
@click="createMeeting"
class="button"
type="primary"
round>Submit
</el-button>
</div>
</el-form>
<div v-if="isMeetingConfirmed">
</div>
</el-col>
</el-row>
</el-container>
</template>
<script>
import scheduleMeeting from "../api/meeting"
export default {
data: () => ({
active: 1,
isVisitor: true,
isMeetingConfirmed: false,
form: {
name: '',
email: '',
phone_no: '',
visitor: {
name: '',
email: '',
phone_no: '',
check_in: '',
check_out: ''
}
}
}),
methods: {
goToStepOne() {
this.isVisitor = true
this.active = 1
},
async goToStepTwo() {
if (
await this.$validator.validate('visitorName', this.form.visitor.name) &&
await this.$validator.validate('visitorEmail', this.form.visitor.email) &&
await this.$validator.validate('visitorPhoneNo', this.form.visitor.phone_no) &&
await this.$validator.validate('visitorCheckIn', this.form.visitor.check_in) &&
await this.$validator.validate('visitorCheckOut', this.form.visitor.check_out)) {
this.isVisitor = false
this.active = 2
}
},
async createMeeting() {
var global = this;
this.$validator.validate().then(valid => {
if (valid) {
scheduleMeeting(global.form)
.then(() => this.isMeetingConfirmed = true)
.catch(error => {
this.$message({
showClose: true,
type: 'error',
message: error.response.data
})
})
}
});
}
}
};
</script>
<style lang="css">
.show {
display: block;
}
.hide {
display: none;
}
.image {
width: 80%;
margin: 1rem auto;
}
.steps {
margin: 0 0 1rem 0;
}
.image-sub-caption {
color: rgb(120, 120, 120);
font-weight: 600;
padding-bottom: 1rem;
}
.feature-list {
margin: 1rem;
list-style: none;
}
.feature-list > li {
font-weight: 400;
color: rgb(120, 120, 120);
padding: 0.4rem 0;
}
.desc {
background-color: #e6f1ff;
text-align: center;
}
.registration-error-message {
color: #f56c6c;
font-size: 13px;
line-height: 1;
padding-top: 4px;
position: relative;
margin: -1rem 0 1rem 0;
top: 100%;
left: 0;
}
.form-div {
padding: 3rem;
}
.form-input {
border: none !important;
margin: 1rem 0;
}
.button {
margin: 2rem 0;
}
</style>
会议.js
import session from "./session";
export default {
scheduleMeeting(meeting) {
return session.post("/meeting/create/", {
...meeting
})
}
};
完整的错误信息日志如下：-
Uncaught (in promise) TypeError: Object(...) is not a function
at eval (ScheduleMeeting.vue?34e8:184)
eval @ ScheduleMeeting.vue?34e8:184
Promise.then (async)
createMeeting$ @ ScheduleMeeting.vue?34e8:182
tryCatch @ vue-phone-number-inp…common.js?7bec:2629
invoke @ vue-phone-number-inp…common.js?7bec:2855
prototype.<computed> @ vue-phone-number-inp…common.js?7bec:2681
tryCatch @ vue-phone-number-inp…common.js?7bec:2629
invoke @ vue-phone-number-inp…common.js?7bec:2719
eval @ vue-phone-number-inp…common.js?7bec:2754
callInvokeWithMethodAndArg @ vue-phone-number-inp…common.js?7bec:2753
enqueue @ vue-phone-number-inp…common.js?7bec:2776
prototype.<computed> @ vue-phone-number-inp…common.js?7bec:2681
module.exports.96cf.exports.async @ vue-phone-number-inp…common.js?7bec:2800
createMeeting @ ScheduleMeeting.vue?34e8:163
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3882
handleClick @ element-ui.common.js?5c96:9393
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
任何提示都会有很大帮助！
解决方案
问题是您scheduleMeeting在createMeeting方法中调用，或者更准确地说，您实际上并没有导入函数，而是包含该函数的对象。
您的出口来自meeting.js
import session from "./session";
export default {
scheduleMeeting(meeting) {
return session.post("/meeting/create/", {
...meeting
})
}
};
这是导出您在语句中分配的scheduleMeeting对象import。
import scheduleMeeting from "../api/meeting"
所以你的函数实际上在scheduleMeeting.scheduleMeeting你的代码中。
以这种方式导出对象有点不寻常 - 默认导出与为export.modulescommonjs 导出设置对象不太一样。我建议你遵循更 ES6 的方法：
更改meeting.js为
import session from "./session";
export function scheduleMeeting(meeting) {
return session.post("/meeting/create/", {
...meeting
})
}
和你的进口声明
import {scheduleMeeting} from "../api/meeting"
当然，还有其他方法可以构建它来修复它，但我认为这是最清楚的。
推荐阅读
- bash - 如何在比较两个文件时获得行的“真实”差异，或者如何从 A 中减去行到 B 和 vv 的行。像 bash oneliner 一样快吗？
- python - 如何使用python在弹出窗口上输入用户名
- mysql - 添加 ORDER BY 时 MySQL 查询崩溃，否则工作正常
- java - 发布错误即将出现检查权限声明表上的错误（播放商店错误）
- excel - IF/OR AND 公式？
- python - Python MySql Select 语句。Python条目中的列在哪里
- css - 将 background-size 应用于多个背景 CSS 行
- mysql - 如何在 MySQL 工作台中区分两个同名并位于两个不同连接处的不同表？
- assembly - 如何在 ax 寄存器中获取 ASCII 码而不是扫描码
- jmeter - Jmeter-如何在响应标头中提取值并获取该值