Can you explain why Vue 2 throws an error indicating that a prop is not defined, even though it is statically defined in the parent template?
Note: This error does not occur when I include the JavaScript code within the .vue file's script tag instead of importing it.
Error Message:
The property or method "embedded" is referenced during render but is not defined on the instance. Ensure that this property is reactive by initializing it either in the data option or for class-based components. For more information, see https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
loader.html
<div class="overlay">
<div class="loader" v-bind:class="{ embedded }">
<div class="loader__items">
<div class="loader__item"></div>
<div class="loader__item"></div>
<div class="loader__item"></div>
<div class="loader__item"></div>
<div class="loader__item"></div>
</div>
</div>
</div>
loader.js
export default {
props: {
embedded: {
default: false,
type: Boolean,
},
},
};
loader.vue
<template src="./loader.html"/>
<script scr="./loader.js" lang="babel"></script>
<style src="./loader.scss" lang="scss" scoped/>
client.js
import Loader from '../../loader/loader.vue';
components: {
Loader
}
client.html
<loader :embedded="true" />