为什么 getter/setter 在 vue typescript 类组件中不能正常工作

问题描述

我是 vue.js 的新手，我想知道为什么以下代码没有按预期工作：

<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>

当我更改“基准”时，会执行 dateChanged() 方法并使用其设置器设置 _timespan 属性。但是 GUI 不会更新。如果我删除 setter/getter 并直接使用 _timespan`-property，则一切正常。我真的认为它也应该与 setter/getter 或其他温度计算属性一起使用，不是吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）