无法使用 Vue 从 TypeScript 中的基类更新属性答案

【问题标题】：Cannot update property from base class in TypeScript with Vue无法使用 Vue 从 TypeScript 中的基类更新属性
【发布时间】：2018-07-22 01:30:11
【问题描述】：

我有一个如下定义的基类

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 开发工具工作，它的工作方式就像一个魅力。我不明白为什么我手动调用的方法无法更新我的 UI。

【问题讨论】：

你的模板代码是什么样的？
我已经编辑了问题包含派生类组件的模板
好吧，如果 Vue 开发工具说状态正在正确更新，我不禁认为这是一个 CSS 问题
在 Vue 开发工具中我的属性没有更新
你检查过 vue-property-decorator 文档中的TypeScript example 吗？您不必使用constructor，因为您已经可以通过public left: number = 100; 等来完成

标签： typescript ecmascript-6 vuejs2 vue-component

【解决方案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 的使用

【讨论】：