Menu
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!
746
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.
173
This happened to me when I forgot the curly braces in an import statement from vuex. I incorrectly coded:
import mapGetters from 'vuex'
Changing instead to the correct syntax:
import { mapGetters } from 'vuex'
Works fine.
34
It happened with me when i trying to generate a unique ID and imported it from quasar framework without curly braces
import uid from 'quasar'
and it fixed when i added curly braces
import {uid} from 'quasar'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
