vue-class-component example from 2017

ControlEdit.ts

import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
    name: 'control-edit',
    props: {
        actionName: {
            type: String,
            default: '',
        },
        row: {
            type: null,
        },
        className: {
            type: String,
            default: '',
        },
    },
})

export default class ControlEdit extends Vue {
    public defaultClassName = 'icon icon_edit';

    get getClassName() {
        return [this.defaultClassName, this.$props.className].join(' ').trim();
    }

    public clickHandler() {
        this.$emit('controlEvent', 'editControlClicked', this.$props.row);

        if (this.$props.actionName) {
            this.$store.dispatch(this.$props.actionName, this.$props.row);
        }
    }
}

ControlEdit.vue

<template>
    <svg :class="getClassName" @click.stop="clickHandler">
        <use xlink:href="#icon_edit"></use>
    </svg>
</template>

<script src="./ControlEdit.ts" lang="ts"></script>

SearchFrame.ts

import Vue from 'vue';
import Component from 'vue-class-component';
import {Getter} from 'vuex-class';
import MyFrame from './Frame.vue';

@Component({
    name: 'search-frame',
    components: {MyFrame},
    props: ['frame'],
})

export default class SearchFrame extends Vue {
    @Getter('getSearchResult') public getSearchResult;

    public titles = {
        districts: 'Информация',
        points: 'Информация',
        religions: 'Информация',
        statistics: 'Статистика',
        wiki: 'Статьи',
    };

    public itemClick(section, item) {
        window.lastViewerState = 'search';

        switch (section) {
            case 'points':
                this.$store.dispatch('addDataViewerFrame', {type: 'parishes', pid: 1, data: item.id});

                break;
            case 'statistics':
                this.$store.dispatch('addDataViewerFrame', {type: 'statisticView', pid: 2, data: item.id});

                break;
            case 'districts':
                this.$store.dispatch('addDataViewerFrame', {type: 'districts', pid: 1, data: item.id});

                break;
            case 'religions':
                this.$store.dispatch('setSearch', '');
                this.$store.dispatch('addDataViewerFrame', {type: 'religions', pid: 1, data: item.id});
                // TODO: open accordion

                break;
        }
        console.log('itemClick', arguments);
    }

    public sectionToTitle(section) {
        return this.titles[section];
    }
}

SearchFrame.vue

<template>
    <my-frame>
        <div slot="content">
            <div class="frame__padded">
                <ul class="search-list" v-if="getSearchResult">
                    <template v-for="(searchResult, section) in getSearchResult">
                        <li class="search-list__item" v-for="result in searchResult" @click="itemClick(section, result)">
                            <a :href="result.href" v-if="result.href" class="search-list__item-link" target="_blank"></a>
                            <div class="search-list__item-title">{{ result.title }}</div>
                            <div class="search-list__item-section-title">{{ sectionToTitle(section) }}</div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </my-frame>
</template>

<script src="./SearchFrame.ts" lang="ts"></script>

<style lang="stylus">
    .search-list {
        padding: 0
        margin: 0
        list-style none

        &__item {
            border-bottom: 1px solid #F1F1F1;
            padding: 19px 0
            cursor: pointer
            position: relative

            &:first-child {
                padding-top: 5px
            }

            &-title {
                font-size: 22px
                color: #414040;
                line-height: 1.2
            }

            &-section-title {
                font-size: 14px
                color: #B7B2B2;
                margin-top: 10px;
            }

            &-link {
                position: absolute
                top: 0
                left: 0
                width: 100%
                height: 100%
            }
        }
    }
</style>