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

Posted 2023-02-23

【中文标题】无法使用 Vue 从 TypeScript 中的基类更新属性

【英文标题】：Cannot update property from base class in TypeScript with Vue

【发布时间】：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; 等来完成

【参考方案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 的使用