Property or method "foo" is not defined on the instance but referenced during render. Make sure that this property is reactive

Question

I'm new on Vue framework and I'm trying to make some composition examples using components, but I having a problem when i try to execute the code:

"Property or method "icons" is not defined on the instance but referenced during render. Make sure that this property is reactive"

In template I have:

<template>
  <div>
    <h1>Welcome a la nueva pagina</h1>
    <div v-for="icon in icons">{‌{ icon }}</div>
  </div>
</template>

In a file called Footer.ts I have the followind code:

import {Component, Vue} from "vue-property-decorator";
import Template from './Footer.vue';

@Component({
    mixins: [Template]
})
export default class Footer extends Vue {
    public icons!: string[];

    constructor() {
        super();
        this.icons = [
            'fab fa-facebook',
            'fab fa-twitter',
            'fab fa-google-plus',
            'fab fa-linkedin',
            'fab fa-instagram'
        ];

        console.log('Footer renderizado');
        this.icons.map((icon) => console.log(icon));
    }
}

Finally on App.vue I have:

<template>
  <div>
    <h1>Pagina principal</h1>
    <footer></footer>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import Footer from '@/component/Footer';

  @Component({
      components: {
          Footer
      }
  })
  export default class App extends Vue {
      mounted() {
          console.log("ensamblado terminado");
      }
  }
</script>

In case of Footer.ts, constructor is never call.

Thanks

Answer 1

Finally i could solve the issue. The problem was simply, inside of MyComponent folder i have, typescript file and html file named as MyFooter.ts and MyFooter.vue. Renaming MyFooter.ts as component.ts and MyFooter.vue as template.vue works perfect. I didn't have any idea, about components and template should be called at this way

Answer 2

Most of the time you get that error because Vue is trying to access the value of a variable that doesn't exist. In other words, you need to make sure that the relevant variable is declared and, ideally, defined, before Vue tries to render your component. Additionally, the whole getter/setter thing with reactive values only works for variables that are expressly defined in data. You can't magically attach a variable something to the this context and expect it to work properly. For more, I recommend referencing the docs.

Answer 3

This error occurs when a variable or a method is not defined on component's instance, while being referenced in side of it's template.

In code example above, variable icons is used in a for loop, but is not declared on component's data.

If you check vue-property-decorators library documentation, you won't see usage examples of constructor method inside Vue components. Because it is not a valid way to declare component's properties.

As instead, data properties should be declared directly on the instance, as such:

export default class Footer extends Vue {
  icons: string[] = [
    'fab fa-facebook',
    'fab fa-twitter',
    'fab fa-google-plus',
    'fab fa-linkedin',
    'fab fa-instagram'
    ]
  }
}

Answer 4

In my case had the same error message and I was missing the @Component annotation on the component class.

import {Component, Prop, Vue} from 'vue-property-decorator';

@Component // <---- this
export default class CustomComponent extends Vue {
  
  @Prop({default: ''}) text!: string;

}