Just starting out with the Vue framework and experimenting with component composition. However, I'm encountering an issue when trying to run the code:
"Property or method "icons" is not defined on the instance but referenced during render. Make sure that this property is reactive"
My template looks like this:
<template>
<div>
<h1>Welcome to the new page</h1>
<div v-for="icon in icons">{{ icon }}</div>
</div>
</template>
In a file named Footer.ts, I've written the following 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 rendered');
this.icons.map((icon) => console.log(icon));
}
}
And in App.vue:
<template>
<div>
<h1>Main Page</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("assembly completed");
}
}
</script>
The constructor in Footer.ts seems to never be called.
Thank you!