VueJS：使用 v-for 渲染数组

Question

From the GET request, I am getting the JOSN response 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"}]

JS code is:

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 variable in JS is defined as follows:

 applicant1: { enquiry: [{ key: "", value: "" },
                        { key: "", value: "" },
                        { key: "", value: "" },
                        { key: "", value: "" },
                        { key: "", value: "" }], 
                 }

I want to render each key and value pairs in my html as follows:

<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>

But I am not able to see the values in my drop down. Can anyone please help? Thanks in advance.

Answer 1

It's common reactivity problem. You can try:

var self = this
axios.get("/TESTAPI/Lookup/Enquiry?optionLookupName=" + optionLookupName).then(function (response) {
  self.applicant1.enquiry = response.data
  self.applicant1 = JSON.parse(JSON.stringify(self.applicant1))
  self.loading = false;
}, function (error) {
  console.log(error);
  self.loading = false;
});

Another way is using Vue.set(self.applicant1, 'enquiry', response.data)

Answer 2

Another way to optimize your API calls and data management is to use Vuex:

https://vuex.vuejs.org/

With Vuex, you can access your API response from multiple components, not only the one in which you performed the call.