javascript - TypeError : Object(. ..) 不是 Vue 中的函数

Question

我是 Vue 新手，正在尝试处理表单。我正在制作一个网络应用程序来管理 session ，为此我有一个多步骤表单来处理访客和主持人数据。当我单击提交按钮时，出现以下错误:-类型错误:对象(...)不是一个函数。我在 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>

meeting.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

任何提示都会有很大帮助!

Answer 1

问题在于您在 createMeeting 方法中调用了 scheduleMeeting，或者更准确地说，您实际上并未导入函数，而是包含该函数的对象。

从 meeting.js 导出

import session from "./session";

export default {
    scheduleMeeting(meeting) {
        return session.post("/meeting/create/", {
            ...meeting
        })
    }
};

这将导出您在 import 语句中分配给 scheduleMeeting 的对象。

import scheduleMeeting from "../api/meeting"

因此，您的函数实际上位于代码内的 scheduleMeeting.scheduleMeeting 处。

以这种方式导出对象有点不寻常 - 默认导出与为 commonjs 导出设置 export.modules 对象不太一样。我建议你遵循更ES6的方法:

将 meeting.js 更改为

import session from "./session";

export function scheduleMeeting(meeting) {
    return session.post("/meeting/create/", {
        ...meeting
    })
}

以及您的导入声明

import {scheduleMeeting} from "../api/meeting"

当然，您还可以通过其他方式构建此问题来修复它，但我认为这是最清楚的。