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

onAddingNewItemHandler(editedItem?: IWordProtectionBlackListItem, index: number = -1) {
    if (editedItem) {
      this.newListItem = editedItem;
    }
    this.editIndex = index;
    this.$modal.show(NEW_WORD_PROTECTION_LIST_MODAL_ID);
  }

  onDeleteAliasHandler(index: number) {
    const newListItemArray = this.value.slice(0);
    newListItemArray.splice(index, 1);
    this.$emit('input', newListItemArray);
  }

  @Watch('errors.items.length')
  @debounce(200)
  async onErrorsChanged() {
    await this.$refs.form.validateAndGetErrorsCount();
  }

  async onAddNewItemHandler() {
    if (await this.$refs.form.validateAndGetErrorsCount()) return;

    const newListItemArray = this.value.slice(0);

    if (this.editIndex > -1) {
      // editing existing item
      newListItemArray.splice(this.editIndex, 1, this.newListItem);
    } else {
      newListItemArray.push(this.newListItem);
    }

@Prop({ default: 0 })
    public scrollToOffset: number; // the offset to add (in case of a sticky header)

    @Prop({ default: true })
    public disabled: boolean;

    public get transitionName(): string | undefined {
        return !this.disabled ? 'm--is' : undefined;
    }

    public get isLeftToRight(): boolean {
        return this.direction === MSlideTransitionDirection.LeftToRight;
    }

    @Emit('enter')
    private transitionEnter(el: HTMLElement, done): void {
        if (!this.disabled) {
            this.$scrollTo.goTo(this.$el as HTMLElement, this.scrollToOffset, ScrollToDuration.Regular);
            setTimeout(() => {
                this.transitionBeforeLeave(el);
            }, 100);
        } else {
            done();
        }
    }

    private transitionAfterEnter(): void {
        (this.$el as HTMLElement).style.removeProperty('height');
        (this.$el as HTMLElement).style.removeProperty('overflow');
    }

public get popupBody(): Element {
        return (this.$children[0] as any).popupBody;
    }

    private get propOpen(): boolean {
        return this.open === undefined ? this.internalOpen : this.open;
    }

    private set propOpen(value: boolean) {
        if (!this.disabled) {
            this.internalOpen = value;
            this.$emit('update:open', value);
        }
    }

    @Emit('open')
    private onOpen(): void { }

    @Emit('close')
    private onClose(): void { }

    public get propOpenTrigger(): MOpenTrigger {
        return this.openTrigger; // todo: mobile + hover ??
    }

    public get propTrigger(): HTMLElement {
        return this.trigger || this.as().triggerHook || undefined;
    }

    private onPortalMounted(): void {
        this.$emit('portal-mounted');
    }

this.tableList.map((item) => {
        if (item.dataIndex) {
          this.checkList.push(item.dataIndex);
        }
        return false;
      });
    }
  }

  // methods
  @Emit()
  onSearch(): void {
    this.$emit('search', Object.assign(this.params, this.Form.getFieldsValue()));
  }

  @Emit()
  reset(): void {
    this.Form.resetFields();
    this.$emit('clearOut');
    this.params = JSON.parse(JSON.stringify(this.initParams));
    this.$emit('search', this.Form.resetFields());
  }

  @Emit()
  levelcodeChange(val: any, key: string): void {
    const value = JSON.parse(JSON.stringify(val));
    this.params.levelCode = value.pop();
  }

  @Emit()
  openSetting(): void {
    this.setModel = true;

'onTabItemTap', //当前是 tab 页时， 点击 tab 时触发 （mpvue 0.0.16 支持）
  'onPageReload'//刷新页面
])

Vue.config.productionTip = false
/* app-only-end */

if (isApp) {
  // 在这个地方引入是为了registerHooks先执行
  MyApp = require('./App.vue').default as IMpVue
}else {
  // MyApp = require('./index.vue')
}

console.log('main.ts here !!')
const app:Vue = new Vue(MyApp)
app.$mount()

Vue.config.errorHandler = function (err) {
  if (console && console.error) {
    console.error(err)
  }
}
/* app-only-end */

if (isApp) {
  // 在这个地方引入是为了registerHooks先执行
  MyApp = require('./App.vue').default as IMpVue
}else {
  // MyApp = require('./index.vue')
}


const app = new Vue(MyApp)
app.$mount()

import { Editor } from 'tiptap'
import ExtensionActionRenderBtnOptionsInterface from './ExtensionActionRenderBtnOptionsInterface'
import TextIcon from '~/extensions/nativeExtensions/icons/TextIcon'
import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
import IconInterface from '~/extensions/nativeExtensions/icons/IconInterface'
import { VTooltip, VBtn, VIcon } from 'vuetify/lib'

// TODO можно использовать как миксин, передавать туда сразу пропсы и не нужно будет писать PROPS = PROPS
export const PROPS = {
  EDITOR: 'editor' as const,
  OPTIONS: 'options' as const,
  CONTEXT: 'context' as const,
  DARK: 'dark' as const
}

@Component({
  components: { VTooltip, VBtn, VIcon }
})
export default class ExtensionActionRenderBtn extends Vue {
  @Prop({ type: Object, required: true })
  readonly [PROPS.EDITOR]: Editor

  @Prop({ type: Object, required: true })
  readonly [PROPS.OPTIONS]: ExtensionActionRenderBtnOptionsInterface

  @Prop({ type: Object, required: true })
  readonly [PROPS.CONTEXT]: any

  @Prop({ type: Boolean, default: false })
  readonly [PROPS.DARK]: boolean

  PROPS = PROPS

get projectOptions() {
      const projects = this.submitter != null && this.submitter.projects || []
      const options = projects.map(({ project: { id, name } }) => ({
        value: id,
        label: name,
      }))
      this.unknownProjects.forEach(project => {
        if (!projects.some(p2 => project.id === p2.project.id)) {
          options.push({ value: project.id, label: project.name })
        }
      })
      options.push({ value: CREATE_PROJECT, label: 'Create a new project...' })
      return options
    }

    @Watch('submitter')
    fetchUnknowns() {
      this.fetchGroupIfUnknown()
      this.fetchProjectsIfUnknown()
    }

    @Watch('value.groupId')
    async fetchGroupIfUnknown() {
      // If the dataset is saved with a groupId for a group that the user isn't a member of, or the group
      // was selected through the find dialog, the drop-down list won't have an entry for it, so do an extra query for it.
      const groupId = this.value.groupId
      if (this.groupIdIsUnknown && (!this.unknownGroup || this.unknownGroup.id !== groupId)) {
        const { data } = await this.$apollo.query({
          query: oneGroupQuery,
          variables: { groupId },
        })
        // Double-check the value hasn't changed before setting unknownGroup

// 如果没指定 v-model ，就存到这里，以便使用数组引用进行更新
    // 解决不传 v-model ， 点击选中三级 ， 再显示，不选再关上，删除之后的问题
    defValue: string[] = [];

    chooseResult: any[] = []; // 点击下拉选项，最后一级之后所得到的值

    chooseAllItem: any[] = []; // 点击下拉选项每一级选择的数据

    chooseItemResult: any[] = []; // 点击下拉选项每一级选择的数据

    currentOption: any = {};

    resizeEvent: any = null;

    @Model('model', { type: Array }) readonly value!: string[];

    @Prop({
      type: Array,
      default: noop,
    })
    private options!: any[];

    @Prop({
      type: String,
      default: '未匹配到结果',
    })
    private emptyText!: string;

    @Prop({
      type: String,
      default: '',