如何理解，然后有效地使用 vue 中的控制台警告和错误？

Question

I (an amateur home developer) am using Vue for about two or three years (recently with the quasar framework) and one of my main problems is how to make sense, and then actually use the warnings or errors I get in the console. Here is an example from a moment ago:

I finally found the row that was causing the problem, but I had to track it in the code and remember what I recently changed to pinpoint the error. This is just an example to illustrate the general problem.

In Python, when I see an error, I also see which exact line triggered it. In my IDE it is enough to click on it and I am there.

I am sure that the console information above also make sense for Vue but at no place I can see the actual line causing the problem.

How should I read this console log to find the erroneous line in my Vue code?

Answer 1

Property or method "props" is not defined

 [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>

This indicates <MainLayout> 's template contains a reference to " props ", which is not declared in the component's data or props (or in setup() if using the Composition API). For example:

<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>

Cannot read property 'row' of undefined

 [Vue warn]: Error in render. "TypeError: Cannot read property 'row' of undefined" found in ---> <MainLayout> <App> at src/App.vue <Root>

This indicates <MainLayout> 's template contains a sub-property reference to an object that is undefined (eg, myUndefinedObj.row ). Given the first warning above, that object is probably props :

<template>
  <div>{{ props.row }}</div>
          ^^^^^^
</template>

I'm guessing you actually have a row prop declared in props , and you're trying to reference it in the template. You can access props or data directly in the template without any prefixes:

<template>
  <div>{{ row }}</div>
</template>

<script>
export default {
  props: {
    row: Number
  }
}
</script>

Error location

TypeError: Cannot read property 'row' of undefined at Proxy.render (MainLayout.vue?1074:54) [...]

The stacktrace in the last warning indicates the filename and location of the error in the form of FILENAME?LINE:COLUMN :

MainLayout.vue?1074:54
   ^            ^    ^
filename        |    |
               line  |
                    column

Many modern IDEs show line number and column in the status bar at the bottom. Visual Studio Code shows them in the bottom right corner:

Clicking on that line indicator box opens a prompt to jump to a specific line number and column in : -delimited form, so you could copy-paste the line/column from the error ( 1074:54 ) into the prompt to jump to the exact location indicated.