Question

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

[{“ key”：“ COMPLAINT”，“ value”：“投诉”}，{“ key”：“ DONATE_ENQ”，“ value”：“捐赠查询“}，{”键“：” 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

这是常见的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)

Answer 2

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

https://vuex.vuejs.org/

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

VueJS：使用v-for

2 个答案: