I've defined a base class like the following:
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;
}
}
Then, I have a derived class set up like this:
<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;
}
}
In my derived class's html template, I have a reference to call the select method from the base class as a click event. When I click on something, the select method in the base class is triggered and it changes the isSelected property. However, the UI doesn't reflect this change.
I've confirmed that the binding is working via Vue Dev Tools, but for some reason, my manually called method isn't updating the UI.