Nuxtjs handler.call 不是函数

Posted 2023-02-23

【中文标题】Nuxtjs handler.call 不是函数

【英文标题】：Nuxtjs handler.call is not a function

【发布时间】：2019-10-26 01:41:58

【问题描述】：

又在敲我的头了。

我很惊讶我在 SOF 上没有看到类似的问题，但这真的很奇怪。 此代码可以正常工作，但我移入了一个独立组件以在多个页面上使用。 这是我转到页面时遇到的错误：

handler.call is not a function

我知道它是这个组件，因为如果我从页面中删除该组件，则不会出现错误并且运行良好。组件不调用函数，脚本中也没有函数。我不知道发生了什么。

在控制台日志中也没有太多帮助：

TypeError: "handler.call is not a function"
    NuxtJS 21

    invokeWithErrorHandling

    callHook

    insert

    invokeInsertHook

    patch

    _update

    updateComponent

    get

    Watcher

    mountComponent

    $mount

    mount

    _callee5$

    tryCatch

    invoke

    method

    asyncGeneratorStep

    _next

    run

    notify

    flush

这是非常简单的组件源代码：

<template>
    <div>
        <button v-if="can_edit" class='btn-blue'> Edit </button>
        <div v-for="card in cards" class='my-credit-card' v-bind:key="card.id">
            <h5>card.name</h5>
            <h5 class='mt-0'>•••• •••• •••• card.last4</h5>
            <p class='small'>Exp. card.expiration</p>
        </div>
        <div v-if="cards.length == 0">
            <p class='subtle'>
                Your saved payment methods will display here once you send your first card!
            </p>
        </div>
        <a v-if="(can_add && cards.length > 0)" href="/add-card" class='action'> + Add New Card </a>
    </div>
</template>
<script>
export default 
    data : function()
        return 
            cards : [
                
                    id: 1,
                    name: "Lisa Smith",
                    last4: "4231",
                    expiration: "12/2022"
                ,
                
                    id: 2,
                    name: "John Smith",
                    last4: "1234",
                    expiration: "11/2023"
                ,
            ],
        ;
    ,
    props : 
        can_add : 
            default : true,
            type: Boolean,
        ,
        can_edit : 
            default : true,
            type: Boolean,
        ,
    ,
    mounted : 
        // fetch cards
    ,

</script>

这就是我导入组件的方式：

<template>
    <section class='container'>
        <h1>My Credit Cards</h1>
        <mycards :can_add="true" :can_edit="true"></mycards>
    </section>
</template>
<script>
import mycards from '~/components/my_cards.vue';
export default 
    data : function()
        return 
            test : 1,
        ;
    ,
    components : 
        mycards,
    ,

</script>

【参考方案1】：

这个：

mounted : 
    // fetch cards
,

应该是：

mounted () 
    // fetch cards
,

您正在将挂载的钩子设置为一个对象，该对象上没有call 方法。

【讨论】：

非常感谢，我简直不敢相信我看了过去，我检查了每一行！

快速响应！

你是救生员。我实际上在应该使用方法的地方使用了mounted