searchanddisplace-core/resources/js/components/Searchers/Index.vue

<template>
    <div style="display: flex; flex-direction: row;">
        <div v-for="(searcher, id) in searchers"
             :key="id"
             @click="onSelect(id)"
             class="box flex-column"
             :class="{selected: id === selectedSearcherId}"
             style="margin-left: 1rem;">
            <div>
                <span> {{ searcher.name }} </span>
            </div>

            <div style="margin-top: 5px; color: dodgerblue;">
                <a @click.stop="onOpen(id)"> View </a>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";

@Component({
})
export default class Create extends Vue {
    private searchers: any = {};
    private selectedSearcherId: string = '';

    async boot() {
        try {
            const { data } = await (window as any).axios.get('/searchers');

            this.searchers = data.searchers;
        } catch (e) {

        }
    }

    onSelect(id: string) {
        if (this.selectedSearcherId === id) {
            this.selectedSearcherId = '';

            this.$emit('selected', {});

            return;
        }

        this.selectedSearcherId = id;

        this.$emit('selected', this.searchers[id]);
    }

    onOpen(id: string) {
        window.open(this.getURL(id), '_blank');
    }

    getURL(id: string) {
        return `/searchers/${id}`;
    }

    created() {
        this.boot();
    }
};
</script>