2

我是 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 或其他therms、计算属性一起使用，不是吗？

4

1 回答 1

3

好的，我得到它的工作。主要问题是，定义的类在运行时根本不存在。vue-class-component 插件只是使用定义并基于它创建一个 VueComponent。所以this不是它看起来的样子。该插件将属性添加为数据属性，将 getter/setter 添加为计算属性。但它似乎没有添加以下划线开头的属性。就像 Owl 在他的评论中提到的那样，这不是 vue-class-compnent 问题，而是记录在案的 vue 行为：https : //vuejs.org/v2/api/#data 无论如何，如果我按如下方式更改代码，它可以工作：

    @Component({
        components: { PageLayout }
    })
    export default class Invoicer extends Vue {

        date = ''
        timesspan = ''

        beforeCreate(): void {
            dayjs.extend(customParseFormat)
        }

        dateChanged(): void {
            console.log("badsfls")
            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.timesspan
        }

        set timespan(value: string) {
            this.timesspan = value
        }

    }

给属性一个不带下划线的其他名称就可以了。

但我想我不会再使用 vue-class-component 插件了。这对我来说太多了。

于 2021-04-04T18:28:20.653 回答