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