如何理解，然后有效地使用 vue 中的控制台警告和错误？ 未定义属性或方法“props”无法读取未定义的属性“行”错误位置

问题描述

我（一名业余家庭开发人员）使用 Vue 大约两三年（最近使用类星体框架），我的主要问题之一是如何理解，然后实际使用我在安慰。这是刚才的一个例子：

我终于找到了导致问题的 row，但我必须在代码中跟踪它并记住我最近更改的内容以查明错误。这只是说明一般问题的示例。

在 Python 中，当我看到错误时，我还会看到是哪一行触发了它。在我的 IDE 中点击它就足够了。

我确信上面的控制台信息对 Vue 也有意义，但在任何地方我都看不到导致问题的实际线路。

我应该如何阅读此控制台日志以查找 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 ) 进入提示跳转到指定的确切位置。