typescript - 无法使用 Vue 从 TypeScript 中的基类更新属性

Question

我有一个如下定义的基类

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;
    }
}

我使用如下派生类

<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;
    }
}

我引用了在派生类的 html 模板中从基类调用 select 方法作为单击事件。当我点击某物时，它会触发基类中的 select 方法并更改 isSelected 属性。但是我看不到html中的效果。

我已经通过 Vue Dev Tools 检查了绑定(bind)是否正常工作，它工作得很好。我不明白为什么我手动调用的方法无法更新我的 UI。

Answer 1

解决方案是:

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;
    }
}

我刚刚在类声明之前添加了@Compnent。我认为这是关于 Vue 与 TypeScript 的结合使用