VueJS: рендеринг массива с использованием v-for

Question

Из запроса GET я получаю ответ JOSN следующим образом:

[{ "ключ": "ЖАЛОБА", "значение": "Жалоба"}, { "ключ": "DONATE_ENQ", "значение": "Пожертвование Запрос "}, {" ключ ":" GENERAL_ENQ " "значение":" Общие Запрос "}, {" ключ ":" MEMBERSHIP_ENQ " "значение":" членство Запрос "}, {" ключ ":" VOL_ENQ "," значение ":" Запрос добровольца "}]

JS код:

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;
                });
            },

Переменная в JS определяется следующим образом:

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

Я хочу отобразить каждую пару ключей и значений в моем html следующим образом:

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

Но я не могу видеть значения в моем раскрывающемся списке. Может кто-нибудь, пожалуйста, помогите? Заранее спасибо.

Answer 1

Другой способ оптимизировать вызовы API и управление данными - использовать Vuex:

https://vuex.vuejs.org/

С помощью Vuex вы можете получить доступ к своему ответу API из нескольких компонентов, а не только из того, в котором вы выполнили вызов.

Answer 2

Это обычная реактивность проблема. Вы можете попробовать:

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;
});

Другой способ использования Vue.set(self.applicant1, 'enquiry', response.data)