如何解决如何将json填充到VueJ的dropdownlist中?
我有这个货币代码api,https://openexchangerates.org/api/currencies.json
如何将json填充到VueJ的dropdownlist中?
这是我目前的代码:
new Vue({
el: "#app",data() {
return {
currencyFrom: null,loading: true,errored: false
};
},mounted() {
axios
.get("https://openexchangerates.org/api/currencies.json")
.then(response => (this.currencyFrom = response))
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
<div v-if="loading">Loading...</div>
<select class="form-control" name="currency_from_code" id="currency_from_code" v-else>
<option v-for="currency in currencyFrom" >{{ currency }}</option>
</select>
</div>
它确实能够加载json,但下拉列表不起作用。
解决方法
您应该设置response.data this.currencyFrom = response.data
new Vue({
el: "#app",data() {
return {
currencyFrom: null,loading: true,errored: false
};
},mounted() {
axios
.get("https://openexchangerates.org/api/currencies.json")
.then(response => {this.currencyFrom = response.data})
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
<div v-if="loading">Loading...</div>
<select class="form-control" name="currency_from_code" id="currency_from_code" v-else>
<option v-for="currency in currencyFrom" >{{ currency }}</option>
</select>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。