Cannot update property from base class in TypeScript with Vue

Question

I have a base class like defined below

import Vue from "vue";
class ComponentBase extends Vue  {
    constructor() {
        super();
        this.left = 100;
        this.top = 100;
        this.isSelected = false;
    }
    public left: number;
    public top: number;
    public isSelected: boolean;

    public select = () => {
        this.isSelected = true;
    }
}

And I use a derived class like below

<template>
    <div class="selectable" @click="select" v-bind:class="{ selected : isSelected }" v-bind:style="{ left: left + 'mm', top: top + 'mm' }">
        <div class="componentBody">
            Product Content
        </div>
    </div>
</template>

import { ComponentBase } from "./TextControls"
import { Component, Prop } from 'vue-property-decorator';

@Component
export default class Product extends ComponentBase {
    constructor() {
        super();
        this.left = 0;
        this.top = 0;
    }
}

I have a reference to call select method from base class in derived class's html template as click event. When I click to something it is firing the select method in base class and changes the isSelected property. However I can't see the effect in html.

I have checked whether binding working vie Vue Dev Tools and it is working like a charm. I can not understand why my manually called method cannot update my UI.

i have edited the question included template of derived class component — Can PERK
– Can PERK, Commented Feb 11, 2018 at 22:23
well if Vue Dev Tools is saying the state is being updated correctly, i cant help but think this is a CSS issue — feihcsim
– feihcsim, Commented Feb 11, 2018 at 22:57
Have you checked the TypeScript example in the vue-property-decorator documentation? You shouldn't have to use constructor because you can already do it via public left: number = 100; and so on — feihcsim
– feihcsim, Commented Feb 12, 2018 at 13:48

Can PERK · Accepted Answer · 2018-02-14 10:49:34Z

1

Solution is :

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

@Component
class ComponentBase extends Vue  {
    constructor() {
        super();
        this.left = 100;
        this.top = 100;
        this.isSelected = false;
    }
    public left: number;
    public top: number;
    public isSelected: boolean;

    public select = () => {
        this.isSelected = true;
    }
}

I have just added @Compnent before class declaration. I think it is about Vue usage with TypeScript

answered Feb 14, 2018 at 10:49

Can PERK

63010 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot update property from base class in TypeScript with Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related