如何解决如何理解,然后有效地使用 vue 中的控制台警告和错误? 未定义属性或方法“props”无法读取未定义的属性“行”错误位置
我(一名业余家庭开发人员)使用 Vue 大约两三年(最近使用类星体框架),我的主要问题之一是如何理解,然后实际使用我在安慰。这是刚才的一个例子:
我终于找到了导致问题的 row
,但我必须在代码中跟踪它并记住我最近更改的内容以查明错误。这只是说明一般问题的示例。
在 Python 中,当我看到错误时,我还会看到是哪一行触发了它。在我的 IDE 中点击它就足够了。
我确信上面的控制台信息对 Vue 也有意义,但在任何地方我都看不到导致问题的实际线路。
解决方法
未定义属性或方法“props”
[Vue warn]: Property or method "props" is not defined on the instance but
referenced during render. [...]
found in
---> <MainLayout>
<App> at src/App.vue
<Root>
这表明 <MainLayout>
的 template
包含对“props
”的引用,该引用未在组件的 data
或 props
(或setup()
(如果使用 Composition API)。例如:
<template>
<div>{{ props }}</div>
</template>
<script>
export default {
props: {
foo: String,// "props" not declared here
},data() {
return {
bar: 1,// "props" not declared here
}
},setup() {
return {
// "props" not declared here
}
}
}
</script>
无法读取未定义的属性“行”
[Vue warn]: Error in render. "TypeError: Cannot read property 'row' of undefined"
found in
---> <MainLayout>
<App> at src/App.vue
<Root>
这表明 <MainLayout>
的 template
包含对 undefined
对象的子属性引用(例如,myUndefinedObj.row
)。鉴于上面的第一个警告,该对象可能是 props
:
<template>
<div>{{ props.row }}</div>
^^^^^^
</template>
我猜您实际上在 row
中声明了一个 props
道具,并且您正试图在模板中引用它。您可以直接在模板中访问 props
或 data
,无需任何前缀:
<template>
<div>{{ row }}</div>
</template>
<script>
export default {
props: {
row: Number
}
}
</script>
错误位置
TypeError: Cannot read property 'row' of undefined
at Proxy.render (MainLayout.vue?1074:54)
[...]
最后一个警告中的堆栈跟踪以FILENAME?LINE:COLUMN
的形式指示错误的文件名和位置:
MainLayout.vue?1074:54
^ ^ ^
filename | |
line |
column
许多现代 IDE 在底部的状态栏中显示行号和列。 Visual Studio Code 在右下角显示它们:
点击该行指示框会打开一个提示,跳转到 :
分隔形式的特定行号和列,因此您可以从错误 (1074:54
) 进入提示跳转到指定的确切位置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。