Just a few hours ago, I kicked off my Vue TypeScript project. I've successfully configured eslint and tslint rules to format the code as desired, which has left me quite pleased.
Now, I'm curious about how to utilize the created/mounted lifecycle hooks in order to call a function when the application or page is refreshed. Despite reading through the documentation and attempting to implement it, I haven't had any luck so far.
<template>
<v-app>
<v-main>
<p>{{ name }}</p>
</v-main>
</v-app>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
components: {},
})
export default class App extends Vue {
name: string = 'hello';
constructor() {
super();
this.test();
}
onClick() {
console.log('clicked');
this.name = 'Clicked Hello';
}
test = (): void => {
this.name = 'Hello World!';
console.log('This is a test and it has been called');
};
mounted = (): void => {
this.test();
};
created = (): void => {
this.test();
};
}
</script>
My goal is simple - to initiate a function right from the start. Although this might seem straightforward, I'm struggling with it and could really use some assistance.
I found that restarting the project and following another answer resolved the issue for me, as there were fewer warnings with the alternative approach.