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

<template>
    <div id="searchers-show">
        <div>
            <h3>{{ searcher.name }}</h3>

            <h5>{{ searcher.description }}</h5>

            <a v-if="editable"
               :href="`/searchers/${searcher.id}/edit`">
                Edit
            </a>
        </div>

        <div v-for="(row, rowIndex) in searcher.rows" :key="`row-${rowIndex}`" class="flex-row">
            <div v-for="(searcherItem, columnIndex) in row" :key="`column-${columnIndex}`">
                <div class="box is-plain">
                    <template v-if="searcherItem.hasOwnProperty('name')">
                        <searcher-show :editable="false"
                                       :searcher="searcherItem">
                        </searcher-show>
                    </template>

                    <template v-else>
                        <b>{{ searcherItem.expression }}</b>

                        <p>
<!--                            // Show example here, so for example the user has to input the example in order to save-->
<!--                            // the regex, show highlight, so apply regex on example text-->
                        </p>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

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

@Component({
    name: 'SearcherShow',
})
export default class Create extends Vue {
    @Prop({default: {}})
    public readonly searcher!: Object;

    @Prop({default: true})
    public readonly editable!: boolean;
};
</script>