Recently delving into the world of vue.js, I find myself puzzled by the unexpected behavior of the code snippet below:
<template>
<page-layout>
<h1>Hello, Invoicer here</h1>
<form class="invoicer-form">
<div><label><span>Datum</span><input v-model="date" v-on:change="dateChanged" /></label></div>
<div><label><span>Zeitraum</span><input v-model="timespan" /></label></div>
</form>
</page-layout>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import PageLayout from '@/components/layout/PageLayout.vue'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
@Component({
components: { PageLayout }
})
export default class Invoicer extends Vue {
date = ''
_timespan = ''
beforeCreate(): void {
dayjs.extend(customParseFormat)
}
dateChanged(): void {
const format = 'DD.MM.YYYY'
const date = dayjs(this.date, format)
if (date.isValid()) {
if (!this.timespan) {
const from = date.subtract(1, 'month').startOf('month').format(format)
const until = date.endOf('month').format(format)
this.timespan = `${from} - ${until}`
}
}
}
get timespan(): string {
return this._timespan
}
set timespan(value: string) {
this._timespan = value
}
}
</script>
After modifying the 'Datum', the dateChanged() method is called to update the _timespan property using its setter. Interestingly, the changes are not reflected in the GUI. When I bypass the setter/getter and directly access the _timespan property, everything functions flawlessly. Is it expected for the setter/getter or computed property to behave in this manner?