How to use nuxt-property-decorator - 10 common examples

@Component({
    name: 'b-input-date-time-',
})
export default class extends mixins(
    InputProps,
    StateProps,
) {
    date = '';
    time = '';

    @Watch('date')
    onDateChange() {
        this.emitDateTime();
    }

    @Watch('time')
    onTimeChange() {
        this.emitDateTime();
    }

    emitDateTime() {
        const dateTime = moment(
            `${this.date} ${this.time}`,
            'YYYY-MM-DD HH:mm',
        ).format();

        this.$emit('input', dateTime);
    }

    async mounted() {
        await Vue.nextTick();
        this.time = moment(this.value).format('HH:mm');

this.indeterminate = false;
            this.allSelected = true;
        } else {
            this.indeterminate = true;
            this.allSelected = false;
        }

        const arrayFiltered = this.value.filter(
            e => this.optionsList.indexOf(e) === -1,
        );
        const newValue = arrayFiltered.concat(array);

        if (!isEquals(this.value, newValue)) this.$emit('input', newValue);
    }

    @Watch('value')
    onValueChange() {
        this.updateSelectedFromValue();
    }

    mounted() {
        this.updateSelectedFromValue();
    }

    get optionsList(): string[] {
        return this.options.map(o => o.value);
    }

    updateSelectedFromValue() {
        const arr = this.value.filter(e => this.optionsList.indexOf(e) !== -1);

        if (!isEquals(this.selected, arr)) this.selected = arr;

import {Vue, Component, Getter} from 'nuxt-property-decorator'
import productGetGql from '~/types/graphql/store/product/get.graphql'
import {Product} from "~/types";

@Component({
  head() {
    return {
      title: (this as any).product.name,
      meta: [
        { hid: 'description', name: 'description', content: (this as any).product.shortDescription }
      ]
    }
  }
})
export default class extends Vue {
  @Getter('store/product/get') product!: Product

  async fetch({store, app, params}) {
    await store.dispatch('apollo/query', {
      query: productGetGql,
      variables: {id: Number(params.id), limit: 3, productLimit: 4}
    })
    const {product} = store.getters['apollo/get']
    store.commit('store/product/setProduct', product)
  }
}

async mounted() {
        await Vue.nextTick();
        this.time = moment(this.value).format('HH:mm');
        this.date = moment(this.value).format('YYYY-MM-DD');
        (this.$refs.time as Vue).$emit('input', this.time);
        (this.$refs.date as Vue).$emit('input', this.date);
    }
}

permissionGetService: true,
    permissionManageEmployee: true,
    permissionManageRentingRoom: true,
    permissionManagePatron: true,
    permissionManagePatronKind: true,
    permissionManagePosition: true,
    permissionManagePrice: true,
    permissionManageService: true,
    permissionManageMap: true,
};

export type PermissionUnion = keyof PermissionType;

@Component
export class PermissionMixin extends Vue {
    @(namespace('user').State)
    private employee!: UserLogin.Employee;

    @Prop({
        default: true,
        validator(value: boolean | string[]) {
            if (typeof value === 'boolean') return true;

            if (!Array.isArray(value)) return false;

            return value.every((key: string) => {
                const condition = `permission${key}` in permissionInstance;

                if (!condition) {
                    console.error(
                        `[Permission warn]: String "${key}" is not a is not a valid prop for permission.\n`,
                        `Expect key to be one of these types:`,

if (index !== -1) row.patrons.splice(index, 1);
        });
    }

    removeRoom(roomId: number) {
        const index = this.tableData.findIndex(row => row.room.id === roomId);

        this.tableData.splice(index, 1);
    }

    nextResult() {
        return new Promise(resolve => this.$once('onResult', resolve));
    }

    @Emit('onResult')
    async onResult({ data }: ApolloQueryResult) {
        this.patrons = data.patrons;
        this.rooms = data.rooms;
    }
}

amountOfPeople,
    numberOfBeds,
    roomKindName,
} from '~/modules/validator';

@Component({
    name: 'popup-room-kind-add-',
    validations: {
        input: {
            name: roomKindName,
            numberOfBeds,
            amountOfPeople,
        },
    },
})
export default class extends mixins>(
    PopupMixin,
    DataMixin({ createRoomKind }),
) {
    onOpen() {
        this.input = {
            name: '',
            numberOfBeds: 1,
            amountOfPeople: 1,
        };
    }
}