javascript - 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>
解决方案
这个:
mounted : {
// fetch cards
},
应该:
mounted () {
// fetch cards
},
您正在将已安装的钩子设置为一个对象,该对象上没有call
方法。
推荐阅读
- parse-platform - Parse Server - 查询最新的对象,但按升序排序结果
- python - 我需要帮助调整包含包裹递送列表的算法以找到最短路径
- .htaccess - 重定向到子目录并更改其名称
- amazon-web-services - 为什么我在尝试使用具有“未经身份验证”访问权限的 Amazon Cognito 身份池时收到“AccessDenied”错误?
- android - 如何在独立应用程序中保存 Wear os android 上的数据
- laravel - Laravel Echo Server - 检测用户断开连接
- python - 使用 MultipartEncoder 从一个 Flask 路由返回多个下载的问题
- node.js - Require ('ffi') 在 Electron 应用程序中抛出错误
- vb.net - 读取txt并添加到richtexbox
- cordova - Ionic 和 Cordova 插件查询