I'm currently experimenting with watch functions in vue-ts. I have configured a watch function that is supposed to trigger whenever a Boolean variable's value changes, but for some reason, it's not triggering at all and I'm unable to determine the cause.
Here is a snippet of my code:
This is how I declared the data:
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { CSSModule } from "@/Services/Modules/CSSModule";
@Component({})
export default class CommentCard extends Vue {
@Prop() comment!: Object;
@Prop() cmEditor!: Object;
@Prop() nextCommentDistance!: number;
@Prop({ default: 300 }) width!: number;
@Prop() commentIndex!: number;
private initialHeight: string;
private textMarker: Object;
private cssModule: Object;
private isFocused: boolean;
In the mounted hook, I am updating the data value, expecting the watch function to be triggered:
mounted() {
this.setDivHeight();
this.isFocused = false;
}
Here is the watch function implementation:
@Watch("isFocused")
highlightComment() {
if (this.textMarker) {
this.textMarker.clear();
}
const css = this.isFocused
? "background-color: " +
this.cssModule.hexToRgba(this.comment.typeColor, 0.5)
: "background-color: " +
this.cssModule.hexToRgba(this.comment.typeColor, 0.8) +
"; box-shadow: 5px 5px 4px rgb(23,24,26)";
let locations = this.comment.serialize.replace("N", "");
locations = locations.split(",");
let startLocation = locations[0].split(":");
let endLocation = locations[1].split(":");
this.textMarker = this.cmEditor.markText(
{ line: parseInt(startLocation[0]), ch: parseInt(startLocation[1]) },
{ line: parseInt(endLocation[0]), ch: parseInt(endLocation[1]) },
{
css: css,
}
);
}
Despite changing the value of isFocused using a button after mounting, the watch function still does not get called. Any insights on what might be causing this would be greatly appreciated.
Thank you.