VueJS：使用 v-for 渲染数组答案

【问题标题】：VueJS: Rendering array using v-forVueJS：使用 v-for 渲染数组
【发布时间】：2018-09-03 06:19:45
【问题描述】：

从 GET 请求中，我得到的 JOSN 响应如下：

[{"key":"COMPLAINT","value":"Complaint"},{"key":"DONATE_ENQ","value":"捐赠查询"},{"key":"GENERAL_ENQ","value":"一般查询"},{"key":"MEMBERSHIP_ENQ","value":"会员查询"},{"key":"VOL_ENQ","value":"志愿者查询"}]

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>

但我无法在下拉列表中看到值。有人可以帮忙吗？提前致谢。

【问题讨论】：

您检查了在{{enq.value}} 旁边打印一个随机字母以检查时间 v-for 触发器是否正确？

标签： javascript vue.js vuejs2

【解决方案1】：

这是常见的reactivity 问题。你可以试试：

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)

【讨论】：

【解决方案2】：

另一种优化 API 调用和数据管理的方法是使用 Vuex：

https://vuex.vuejs.org/

使用 Vuex，您可以从多个组件访问您的 API 响应，而不仅仅是您执行调用的那个。

【讨论】：