I'm encountering an issue with a basic Vue component. I'm attempting to trigger a rerender of v-if="isTouched" by setting the setter (via the touch event). Vue dev tools indicate that the _isTouched variable is showing as "undefined". My understanding is that variables like this should be automatically included in the components data() block. However, this doesn't appear to be the case. Any insights on what I might be overlooking?
Thanks//M
<template>
<div v-if="selectedProgramItem">
{{isTouched}}
<span v-if="isTouched">Unsaved changes</span>
<input type="text" class="form-control" v-model="selectedProgramItem.title" />
<button @click="touch()">Touch object</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { ProgramItem } from '@/entities/ProgramItem';
@Component
export default class ProgramEditItemPane extends Vue {
@Prop() private selectedProgramItem?: ProgramItem;
_isTouched: boolean = false;
private get isTouched(): boolean {
return this._isTouched;
}
private set isTouched(val: boolean) {
this._isTouched = val;
// this._isTouched <<<<<<<<< == undefined here.
}
private touch() {
this.isTouched = true;
}
}
</script>