Best practice for Vue Typescript Component class property initializers

Question

I am seeing a lot of conflicting documentation about Vue + Typescript component classes.

Where does one define properties? In the @Component annotation as outlined here? As @Prop annotated instance properties as outlined here?

Where does one initialized defined properties? In the constructor? In the field-level property definition?

Is there a definitive, up-to-date reference for these things, or an up-to-date sample app?

Here's what I have now:

<template>
    <div class='contacts'>

        <b-form @submit="search">
            <b-form-group>
                <b-form-input v-model="q"></b-form-input>
            </b-form-group>

            <b-button type="submit" variant="primary">Search</b-button>
        </b-form>

        <b-table :items='contacts'></b-table>
    </div>
</template>

<script lang="ts">

    import {Component, Prop, Vue} from 'vue-property-decorator'

    @Component
    export default class Contacts extends Vue {
        constructor(options: any) {
            super(options);
            this.q = 'dummy data';
            this.contacts = [{
                'id': 1,
                'first_name': 'Lukas',
                'last_name': 'Stigers',
                'email': null,
                'gender': 'Male',
                'phone': '776-878-7222'
            }, {
                'id': 2,
                'first_name': 'Dari',
                'last_name': 'Matkin',
                'email': null,
                'gender': 'Female',
                'phone': '833-146-3305'
            }]
        }

        @Prop() private q: string

        @Prop() private contacts: any

        search(event:Event) {
            event.preventDefault();
            alert('You searched for ' + this.q)
        }
    }

</script>

This works, but I'm receiving these warnings in the browser:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "q"

Craig Harshbarger · Accepted Answer · 2019-12-03 19:16:36Z

7

First, it appears that you are using vue-property-decorator and not vue-class-component. You can find the github page for vue-property-decorator here.

Second, You're getting that error because you're declaring a prop using @Prop() but you're then setting its value in the constructor. If you want a default value for your prop add it to the decorator like this

@Prop({ default: 'dummy data'})
private q: string;

if you want q to be part of the components data just define it as a property on the class without the decorator like

private q: string = 'dummy data';

answered Dec 3, 2019 at 19:16

Craig Harshbarger

2,3133 gold badges22 silver badges30 bronze badges

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

2 Comments

Sam Barnum Over a year ago

The HelloWorld.vue in the Vue new project template used vue-property-decorator. Is vue-class-component an alternate/better option?

Craig Harshbarger Over a year ago

vue-class-component just gives you the @Component decorator and it recommends vue-property-decorator for other decorators like @Watch and @Prop. vue-property-decorator actually depends on vue-class-component so if you import component from vue-property-decorator you're actually using vue-class-component. vue-property-decorator just gives you more decorators to work with than just the @Component class decorator. At least that is my understanding.

Ohgodwhy · Accepted Answer · 2019-12-03 19:16:05Z

2

You should use the default argument of the @Prop decorator:

@Prop({
  default: 'dummy data'
}) private q!: string

answered Dec 3, 2019 at 19:16

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

4 Comments

Sam Barnum Over a year ago

Thanks. Any link to preferred documentation? I needed to use a function for the default contacts array, and it appears to be happy.

Ohgodwhy Over a year ago

@SamBarnum You can find the documentation here.

Julia Over a year ago

What's that ! for? private q!

Ohgodwhy Over a year ago

@Julia private indicates the member access type. The ! tells typescript that this property is initialized without a value. And the : string tells typescript that this variable will always be a string (once initialized)

Collectives™ on Stack Overflow

Best practice for Vue Typescript Component class property initializers

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related