why are getter/setter not working properly in vue typescript class component

Question

I'm new to vue.js and I'm wondering why the following code is not working as expected:

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

when I change the 'Datum' the dateChanged()-method is executed and sets the _timespan-property with its setter. But the GUI won't be updated. If I remove the setter/getter and use the _timespan`-property directly, everything works fine. I really think it should also work with the setter/getter or in other therms, computed property, shouldn't it?

Maybe your approach conflicts with the TypeScript rules for getters and setters. Because they are thought to be used inside a plain Object. I am not sure wether a component is seen as this. — user6749601
– user6749601, Commented Apr 3, 2021 at 22:09

tony19 · Accepted Answer · 2022-07-15 05:44:15Z

3

Ok, I got it working. The main problem is, the defined class isn't existing at all on runtime. The vue-class-component plugin just use the definition and creates a VueComponent based on it. So this isn't what it it seems to be. The plugin adds properties as data properties, getter/setter as computed properties. But it seems like it doesn't add properties starting with an underscore. Like Owl mentioned in his comment, this is not an vue-class-compnent issue but a documented vue behavior: https://v2.vuejs.org/v2/api/#data Anyhow, if I change the code as follows, it works:

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

    }

Giving the property an other name without leading underscore does the trick.

But I think I won't use the vue-class-component plugin anymore. It is too much around the corner thinking for me.

edited Jul 15, 2022 at 5:44

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 4, 2021 at 18:28

Chris

1332 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roberto Langarica Over a year ago

I don't like the vue-class-component either. Give a try to Vue3 with composition API, it now has TS support out of the box (Vue3 is written in TS) and the composition API feels a lot of better than the class appproach

Chris Over a year ago

That sounds very promising thanks for the tip. Vue will be used in the new Projekt I start working on next week. I'm not sure if using Vue 3 is already an option because of its beta state but first class typescript support makes trying it out absolutely worthy I think.

Roberto Langarica Over a year ago

It isn't beta anymore, last year (September I think) it was moved to release state. I'm currently using it in a couple of projects and in my opinion is worth it.

Owl Over a year ago

Haven't tried your code but this seems to be a Vue issue, not vue-class-component issue, check this issue

Collectives™ on Stack Overflow

why are getter/setter not working properly in vue typescript class component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related