[Vuejs]-How to make sense of, and then effectively use the console warnings and errors in vue?

0👍

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 (e.g., 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:

VS Code status bar

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.

Leave a comment