もう一度私の頭を叩いていました。
私は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>
_
この:
mounted : {
// fetch cards
},
_
になるべきです:
mounted () {
// fetch cards
},
_
マウントされたフックをオブジェクトに設定しています。これにはcall
メソッドがありません。