web-dev-qa-db-ja.com

NUXTJS Handler.callは関数ではありません

もう一度私の頭を叩いていました。

私は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>
 _
javascriptvue.jscomponentsnuxt.js
4
Zac

この：

mounted : {
    // fetch cards
},
 _

になるべきです：

mounted () {
    // fetch cards
},
 _

マウントされたフックをオブジェクトに設定しています。これにはcallメソッドがありません。

9
skirtle