Users input their pin-code which is checked against the database and returned with the locality, district and state associated with that pin-code. Multiple localities may be returned so the options are passed to a select element so the user can choose theirs.
Old values are also passed as props to the Vue component and displayed in event of server side validation error.
Vue Component
<template>
<div>
<div class="form-row">
<b-form-group class="col-6" label="Pincode" label-for="pincode">
<b-form-input
id="pincode"
name="pincode"
v-model="pincode"
placeholder="Pincode"
type="number"
min="100000"
max="999999"
:state="pincodeState"
></b-form-input>
<b-form-invalid-feedback id="pincode-live-feedback">
Pincode must be 6 digits
</b-form-invalid-feedback>
</b-form-group>
<b-form-group
class="col-6"
label="Locality (Please Select)"
label-for="locality"
>
<b-form-select
id="locality"
name="locality"
class="form-control"
v-model="locality"
:options="l_options"
:state="pinValid"
>
</b-form-select>
<b-form-invalid-feedback id="locality-live-feedback">
Pincode doesn't exist
</b-form-invalid-feedback>
</b-form-group>
</div>
<div class="form-row">
<b-form-group class="col-6" label="District" label-for="district">
<b-form-input
id="district"
type="text"
class="form-control"
v-model="district"
:state="pinValid"
disabled
></b-form-input>
<b-form-invalid-feedback id="district-live-feedback">
Pincode doesn't exist
</b-form-invalid-feedback>
</b-form-group>
<b-form-group class="col-6" label="State" label-for="state">
<b-form-input
id="state"
type="text"
class="form-control"
v-model="state"
:state="pinValid"
disabled
></b-form-input>
<b-form-invalid-feedback id="state-live-feedback">
Pincode doesn't exist
</b-form-invalid-feedback>
</b-form-group>
<input type="text" hidden name="district" :value="district" />
<input type="text" hidden name="state" :value="state" />
</div>
</div>
</template>
<script>
export default {
name: "AddressReceiver",
props: {
p_old: {
default: null,
},
l_old: {
default: null,
},
d_old: {
default: null,
},
s_old: {
default: null,
},
},
data() {
return {
pincode: this.p_old,
locality: this.l_old,
l_options: [],
district: this.d_old,
state: this.s_old,
pincodeState: null,
pinValid: null,
};
},
methods: {
pincodeSearch() {
axios
.get("/api/pincode/" + parseInt(this.pincode))
.then((response) => {
this.pinValid = true;
this.resetIn();
for (let i = 0; i < response.data.length; i++) {
this.l_options.push(response.data[i].locality);
}
if (this.l_old) {
this.locality = this.l_old;
} else {
this.locality = response.data[0].locality;
}
this.district = response.data[0].district;
this.state = response.data[0].state;
})
.catch((error) => {
this.pinValid = false;
this.resetIn();
});
},
resetIn() {
this.l_options = [];
this.locality = null;
this.district = null;
this.state = null;
},
},
mounted() {
if (this.p_old) {
this.pincode = this.p_old;
this.pincodeSearch();
}
},
watch: {
pincode(newPin) {
if (newPin >= 100000 && newPin <= 999999) {
this.pincodeSearch();
this.pincodeState = true;
} else {
this.resetIn();
this.pinValid = null;
this.pincodeState = false;
if (!newPin) {
this.pincodeState = null;
}
}
},
},
computed: {
pincodeValid() {},
},
};
</script>
Component in Blade file
<address-receiver p_old="{{ old('pincode') }}"
l_old="{{ old('locality') }}"
d_old="{{ old('district') }}"
s_old="{{ old('state') }}"
>
</address-receiver>
Is there a more elegant way of implementing the old data? I am doing the API call again and getting the options after which the old value is set as the selected value. Any criticism is welcome. I am new to Vue and would love to learn.