I have this VueJS application written using Typescript. I'm using Axios to get data from my database. This works well and the result I get is an array which is what I was expecting. When I do console.log on this array I can see that it's the correct result.
However, when I try to loop through this array to create the options for my select drop down I get a blank list. Why isn't the result ing up even though the variable I'm looping through is an array?
Edit: I've added a picture here showing the Axios result (response.data)
export default class EditRoute extends Vue {
result: any;
selectedRoute: string;
constructor(){
super();
this.selectedRoute = "";
this.result = [];
}
loadData() {
axios.get('http://localhost:8080/routes')
.then(response => (this.result = response.data));
}
}
<select name="routeSelect" v-model="selectedRoute">
<option v-for="routes in result" v-bind:key="routes.name" v-bind:value="routes.name"> {{ routes.name }} </option>
</select>
<button @click="loadData">Load data</button>
I have this VueJS application written using Typescript. I'm using Axios to get data from my database. This works well and the result I get is an array which is what I was expecting. When I do console.log on this array I can see that it's the correct result.
However, when I try to loop through this array to create the options for my select drop down I get a blank list. Why isn't the result ing up even though the variable I'm looping through is an array?
Edit: I've added a picture here showing the Axios result (response.data)
export default class EditRoute extends Vue {
result: any;
selectedRoute: string;
constructor(){
super();
this.selectedRoute = "";
this.result = [];
}
loadData() {
axios.get('http://localhost:8080/routes')
.then(response => (this.result = response.data));
}
}
<select name="routeSelect" v-model="selectedRoute">
<option v-for="routes in result" v-bind:key="routes.name" v-bind:value="routes.name"> {{ routes.name }} </option>
</select>
<button @click="loadData">Load data</button>
1 Answer
Reset to default 5Since your result is an object which is containing one item, that item is an array called routes in this case you should loop through result.routes like so :
<option v-for="routes in result.routes" v-bind:key="routes.name" v-bind:value="routes.name"> {{ routes.name }} </option>
Extra Example :
new Vue({
el: '#app',
data: function() {
return {
selectedUser: '',
users: [],
}
},
mounted: function() {
// this.loadData();
// this.timer = setInterval(this.loadData, 4000);
},
methods: {
loadData: function() {
axios.get('https://jsonplaceholder.typicode./users').then(response => {
this.users = response.data;
}).catch(e => {
})
}
}
})<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg./[email protected]/dist/vue.js"></script>
<script src="https://unpkg./axios/dist/axios.min.js"></script>
<script src="https://unpkg./[email protected]/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<select name="userSelect" v-model="selectedUser">
<option v-for="user in users" v-bind:key="user.id" v-bind:value="user.name"> {{ user.name }} </option>
</select>
<button @click="loadData">Load data</button>
</div>
</body>
</html>