shipping-portal/resources/assets/vue/components/settings/elements/PostcodeSectionComponent.vue

<template>
    <div class="row m-b-15 parentContainer">
        <div class="col">
            <div class="row m-b-10" @keyup.enter="submitSearch()">
                <div class="col-6 col-md mb-2 mb-md-0">
                    <validation-wrapper-component :validator="$v.postcode">
                        <label class="text-primary">Postcode</label>
                        <input type="text" class="form-control fs-12" v-model="postcode">
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row m-b-20">
                <div class="col-12 col-md-auto m-b-15">
                    <div class="row">
                        <div class="col p-r-0">
                            <div class="btn btn-primary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30"
                                @click="submitSearch()">
                                Search
                            </div>
                        </div>
                        <div class="col p-l-0">
                            <div class="btn btn-secondary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30"
                                @click="resetSearch()">
                                Reset
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-b-20">
                <div class="col">
                    <list-component :key="key" section="allPostcodesSection" :endpoint="route('api.address.district.list')" :options="options">
                        <template slot="list" slot-scope="{data}">
                            <list-postcode-component :data="item" :searchValue="submittedPostcode" v-for="(item, index) in data.postcodeArray" v-bind:key="index"></list-postcode-component>
                        </template>
                    </list-component>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import modalFormHandler from '../../../general/mixins/modalFormHandler';
import { required } from "vuelidate/lib/validators";

export default {
    props: {
        section: {
            default: 'allStateChargesSection'
        },
    },
    data() {
        return {
            key: 1,
            options: { country_id: 1 },
            postcode: '',
            submittedPostcode: '',
        }
    },
    validations: {
        postcode: {},
    },
    methods: {
        submitSearch() {
            this.submittedPostcode = this.postcode;
            this.options = { country_id: 1, postcode_like: this.submittedPostcode };
            this.key += 1;
        },
        resetSearch() {
            this.options = { country_id: 1 };
            this.submittedPostcode = '';
            this.postcode = '';
            this.key += 1;
        },
    },
    mixins: [modalFormHandler]
}

</script>