Vue.js - Property or method "blah" is not defined on the instance but referenced during render

4
votes

Why does Vue 2 throw an error that a prop is not defined when it is statically defined in the parent template?

Note: This error is not thrown if I bring the javascript inside the .vue file's script tag as opposed to importing it.

Error:

Property or method "embedded" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property. See https://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" />
1
javascriptvue.jsvuejs2
What exactly is the error? How are you importing loader into client.js? – Phil
@Phil -> Edited – hally9k
I've tried declaring it in the data property but exactly the same error :( – hally9k
Your code works without warnings: jsfiddle.net/quv49nwa – acdcjunior
Is it maybe to do with the way that vue shares scope for components... If I put it in a script tag then a new instance of component and it's scope for each import of .vue file? As opposed to if I import then all components share the instance in the module system? I'm pretty noob to Vue so I'm still a bit foggy as to how these bits work in contrast to a Redux app. – hally9k

1 Answers

2
votes

Hypothesis:

When importing the loader.js file using the src="./loader.js" in the .vue file's markup the error in the initial question is thrown. This instance of the component object might be being shared between every instance of the loader component, some of which have the embedded prop passed in and some that don't. This could open the door to other calls to the <loader /> constructor over writing the prop's value on instantiation.

Solution:

Switching to an import and export inside the script tag fixes the error:

loader.vue

<template src="./loader.html" />
<script lang="babel">
    import loader from './loader';

    export default loader;
</script>
<style src="./loader.scss" lang="scss" scoped />