Upon receiving the GET request, the JSON response is as follows:
[{"key":"COMPLAINT","value":"Complaint"},{"key":"DONATE_ENQ","value":"Donation Enquiry"},{"key":"GENERAL_ENQ","value":"General Enquiry"},{"key":"MEMBERSHIP_ENQ","value":"Membership Enquiry"},{"key":"VOL_ENQ","value":"Volunteer Enquiry"}]
Here is the JS code snippet:
getEnquiry: function getEnquiry() {
this.applicant1.option_lookup = document.getElementById('hdnOptionsLookup').value;
var optionLookupName = this.applicant1.option_lookup;
axios.get("/TESTAPI/Lookup/Enquiry?optionLookupName=" + optionLookupName).then(function (response) {
this.applicant1.enquiry = response.data;
var test = this.applicant1.enquiry;
alert(test);
console.log(response.data);
this.loading = false;
}, function (error) {
console.log(error);
this.loading = false;
});
},
The JS variable is defined as shown below:
applicant1: { enquiry: [{ key: "", value: "" },
{ key: "", value: "" },
{ key: "", value: "" },
{ key: "", value: "" },
{ key: "", value: "" }],
}
The objective is to display each key and value pair in the HTML like so:
<div class="form-group" v-bind:class="{input_error:applicant1.enquiry_error}">
<select id="applicant1_enquiry" class="form-control" v-model="applicant1.enquiry">
<option :value="null">Select the reason for your enquiry</option>
<option v-for="enq in applicant1.enquiry" :value="enq.key">{{enq.value}}</option>
</select>
</div>
However, the values are not appearing in the drop-down list. Any assistance would be greatly appreciated. Thank you.