CODEWITHSUNDEEP
javascripttypescriptvue.js
Kravag
Kravag

Reputation: 25

Vue.js class is not instantiated

I have a class named Artefact which contains a component AddArtefact. But the Instance Lifecycle Hooks (mounted, created...) are not called in the AddArtefact class and if you print this it shows null. But why is this?

Artefact:

<template>
    <div>
        <button v-show="selectedTab === 0" @click="AddArtefact">Add Artefact</button>
        <AddArtefact v-show="selectedTab === 1"></AddArtefact>
    </div>
</template>

<script lang="ts">
import {Vue, Prop, Component} from 'vue-property-decorator';
import $ from 'jquery';
import AddArtefact from '@/views/add/AddArtefact.vue';

@Component({
    components: {
        AddArtefact,
    },
})

export default class Artefact extends Vue {
    private selectedTab: number = 0;

    private AddArtefact() {
        this.selectTab(1);
    }

    private selectTab(tab: number) {
        this.selectedTab = tab;
    }
}
</script>

AddArtefact:

<template>
    <div>
        <p>{{Test}}</p>
        <button @click="testClick">Test Button</button>
    </div>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
import $ from 'jquery';

export default class AddArtefact extends Vue {
    private Test: string = '';

    private mounted() { 
        this.Test = 'Test 123';
        console.log('test');
    }

    private testClick() {
        console.log('Test Click');
        console.log(this); 
    }
}
</script>

Upvotes: 0

Views: 79

Answers (1)

coyotte508
coyotte508

Reputation: 9695

You forgot to add @Component:

@Component
export default class AddArtefact extends Vue {

And you can put the mounted in there too:

@Component({
   mounted(this: AddArtefact) {
     ...
   }
}) 
export default class AddArtefact extends Vue {

Upvotes: 1

Related Questions