TypeError: Object(...) 不是 Vue 中的函数
[英] TypeError: Object(...) is not a function in Vue
本文介绍了TypeError: Object(...) 不是 Vue 中的函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Vue 的新手，正在尝试处理表单.我正在制作一个网络应用程序来管理会议，为此我有一个多步骤表单来处理访问者和主持人数据.当我单击提交按钮时，出现以下错误:-TypeError: Object(...) is not a function.我在 stackoverflow 上搜索了它，但找不到太多线索.以下是我的代码:-
scheduleMeeting.js
<el-容器><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">轻松安排会议！</h1><p class="image-sub-caption">现在管理会议更轻松</p><ul class="功能列表"><li>通过电子邮件和手机获取即时会议确认！</li><li>随时随地安排会议！</li><li>使用您的手机安排会议</li><li>通过您的邮寄地址查看电子邮件</li><li>跟踪所有访客和主持人</li>
</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="访客详情"></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-输入姓名=访客姓名"v-validate="'required|alpha_spaces'"prefix-icon="el-icon-user"类=表单输入"占位符="访客姓名"v-model="form.visitor.name"/><p v-if="errors.has('visitorName')" class="registration-error-message">{{errors.first("visitorName")}}</p><el-输入名称=访客电子邮件"v-validate="'required|email'"prefix-icon="el-icon-message"类=表单输入"占位符="访客电子邮件"v-model="form.visitor.email"/><p v-if="errors.has('visitorEmail')" class="registration-error-message">{{errors.first("visitorEmail")}}</p><vue-电话号码-输入v-validate="'必需'"名称=访客电话号码"v-model="form.visitor.phone_no"class="表单输入"/><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-pickerv-validate="'必需'"名称=访客签到"类=表单输入"v-model="form.visitor.check_in"类型=日期时间"参考 =签入"placeholder="访客签到"/><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-pickerv-validate="'required|after:check_in'"名称=访客结账"类=表单输入"v-model="form.visitor.check_out"类型=日期时间"placeholder="访客结账"/><p v-if="errors.has('visitorCheckOut')" class="registration-error-message">{{errors.first("visitorCheckOut")}}</p></el-col></el-row><el-row><el 按钮@click="goToStepTwo"类=按钮"类型=主要"round>下一个<i class="el-icon-arrow-right"></i></el-button></el-row>
<div :class="{'show':!isVisitor, 'hide':isVisitor}"><el-输入名称=主机名"v-validate="'required|alpha_spaces'"prefix-icon="el-icon-user"类=表单输入"占位符=主机名"v-model="form.name"/><p v-if="errors.has('hostName')" class="registration-error-message">{{errors.first("hostName")}}</p><el-输入名称=主机电子邮件"v-validate="'required|email'"prefix-icon="el-icon-message"类=表单输入"占位符=主机电子邮件"v-model="form.email"/><p v-if="errors.has('hostEmail')" class="registration-error-message">{{errors.first("hostEmail")}}</p><vue-电话号码-输入名称="hostPhoneNo"v-validate="'必需'"v-model="form.phone_no"class="表单输入"/><p v-if="errors.has('hostPhoneNo')" class="registration-error-message">{{errors.first("hostPhoneNo")}}</p><el 按钮icon="el-icon-arrow-left"清楚的@click="goToStepOne"类=按钮"圆>背</el-button><el 按钮@click="createMeeting"类=按钮"类型=主要"回合>提交</el-button>
</el-form><div v-if="isMeetingConfirmed">
</el-col></el-row></el-容器></模板><脚本>从../api/meeting"导入 scheduleMeeting导出默认{数据:() =>({活跃:1，isVisitor: 真,isMeetingConfirmed: 假,形式: {姓名: ''，电子邮件: ''，电话号码: ''，访客:{姓名: ''，电子邮件: ''，电话号码: ''，报到: ''，查看: ''}}}),方法: {goToStepOne() {this.isVisitor = truethis.active = 1},异步 goToStepTwo() {如果 (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) &&等待 this.$validator.validate('visitorCheckOut', this.form.visitor.check_out)) {this.isVisitor = falsethis.active = 2}},异步 createMeeting() {var global = this;this.$validator.validate().then(valid => {如果(有效){日程安排会议(global.form).then(() => this.isMeetingConfirmed = true).catch(错误=> {this.$message({showClose: 真,类型:'错误'，消息:error.response.data})})}});}}};<style lang="css">.展示 {显示:块；}.隐藏 {显示:无；}.图片 {宽度:80%；保证金:1rem 自动；}.脚步 {边距:0 0 1rem 0；}.image-sub-caption {颜色:RGB(120、120、120)；字体粗细:600；填充底部:1rem;}.feature-list {保证金:1rem；列表样式:无；}.feature-list >李{字体粗细:400；颜色:RGB(120、120、120)；填充:0.4rem 0；}.desc {背景颜色:#e6f1ff；文本对齐:居中；}.registration-error-message {颜色:#f56c6c；字体大小:13px；行高:1；填充顶部:4px；位置:相对；边距:-1rem 0 1rem 0；顶部:100%；左:0；}.form-div {填充:3rem；}.form-input {边界:无！重要；保证金:1rem 0；}.按钮 {边距:2rem 0；}</风格>
meeting.js
从./session"导入会话；导出默认{scheduleMeeting(会议){return session.post("/meeting/create/", {...会议})}};
完整的错误信息日志如下:-
Uncaught (in promise) TypeError: Object(...) is not a function在 eval (ScheduleMeeting.vue?34e8:184)评估 @ ScheduleMeeting.vue?34e8:184Promise.then(异步)createMeeting$ @ ScheduleMeeting.vue?34e8:182tryCatch @ vue-phone-number-inp...common.js?7bec:2629调用 @ vue-phone-number-inp...common.js?7bec:2855原型.<计算>@ vue-phone-number-inp...common.js?7bec:2681tryCatch @ vue-phone-number-inp...common.js?7bec:2629调用 @ vue-phone-number-inp...common.js?7bec:2719eval @ vue-phone-number-inp...common.js?7bec:2754callInvokeWithMethodAndArg @ vue-phone-number-inp...common.js?7bec:2753enqueue @ vue-phone-number-inp...common.js?7bec:2776原型.<计算>@ vue-phone-number-inp...common.js?7bec:2681module.exports.96cf.exports.async @ vue-phone-number-inp...common.js?7bec:2800createMeeting @ ScheduleMeeting.vue?34e8:163invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854调用者 @ vue.runtime.esm.js?2b0e:2179invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854Vue.$emit @ vue.runtime.esm.js?2b0e:3882handleClick @ element-ui.common.js?5c96:9393invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854调用者 @ vue.runtime.esm.js?2b0e:2179original._wrapper @ vue.runtime.esm.js?2b0e:6911
任何提示都会有很大帮助！
解决方案
问题在于您在 createMeeting 方法中调用了 scheduleMeeting，或者更准确地说是您没有调用实际上是导入了一个函数，但是一个包含该函数的对象.
您从 meeting.js
导出
从./session"导入会话；导出默认{scheduleMeeting(会议){return session.post("/meeting/create/", {...会议})}};
这是导出您在 import 语句中分配给 scheduleMeeting 的对象.
从../api/meeting"导入 scheduleMeeting
所以你的函数实际上是在你的代码中的 scheduleMeeting.scheduleMeeting.
以这种方式导出对象有点不寻常 - 默认导出与为 commonjs 导出设置 export.modules 对象并不完全相同.我建议你遵循更 ES6 的方法:
将meeting.js改为
从./session"导入会话；导出函数 scheduleMeeting(meeting) {return session.post("/meeting/create/", {...会议})}
和你的导入语句
从../api/meeting"导入{scheduleMeeting}
当然，您还可以通过其他方式构建此问题来修复它，但我认为这是最清楚的.
I am new to Vue and trying to handle form. I am making a web app to manage meetings and for this I have multi-step form which will handle visitor and host data. When I click submit button, I get following error:-
TypeError: Object(...) is not a function
. I searched for it on stackoverflow but couldn't get much clue.
Following is my code:-
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>
meeting.js
import session from "./session";
export default {
scheduleMeeting(meeting) {
return session.post("/meeting/create/", {
...meeting
})
}
};
Complete error message log is as follows:-
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
Any hint would be of great help!
解决方案
The problem is your call to scheduleMeeting in your createMeeting method, or more precicely that you have not actually imported a function, but an object containing the function.
Your export from meeting.js
import session from "./session";
export default {
scheduleMeeting(meeting) {
return session.post("/meeting/create/", {
...meeting
})
}
};
this is exporting an object which you are assigning to scheduleMeeting in your import statement.
import scheduleMeeting from "../api/meeting"
So your function is actually at scheduleMeeting.scheduleMeeting inside your code.
It is a little unusual to export an object in this way - the default export is not quite the same as setting the export.modules object for a commonjs export. I suggest you follow a more ES6 method:
Change meeting.js to
import session from "./session";
export function scheduleMeeting(meeting) {
return session.post("/meeting/create/", {
...meeting
})
}
and your import statement to
import {scheduleMeeting} from "../api/meeting"
Of course there are other ways you could structure this to fix it, but I think this is the clearest.
这篇关于TypeError: Object(...) 不是 Vue 中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
