Search code examples
vue.jsuuidvue-propsvue-class-componentsvue-property-decorator

VueJS - Result of a function as default value for a Prop

Using VueJS with class components and vue-property-decorator I am Trying to write a Vue Component with an uuid Prop that defaults to a new uuid (using npm package uuid) when not provided :

import {Component, Prop, Vue} from 'vue-property-decorator';
import * as uuid from 'uuid';

@Component
export default class BlockComponent extends Vue {
  @Prop({default: uuid.v1()}) uuid!: string;
}

so that when an server-provided uuid is given on instantiation, it's used on the front-end, if not, it means it's a new element and a new uuid should be generated for that component. The problem I have with this code is that I end up with multiple components spawning with the same uuid (but not all of them).

Solution

  • As per documentation you can use a constructor, so one can pass a function.

    @Prop(options: (PropOptions | Constructor[] | Constructor) = {})