Populating options for select using v-for VueJS after handling load data event

Question

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

user_8172857 · Answer

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

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.com/users').then(response => {
        this.users = response.data;

      }).catch(e => {

      })
    }
  }

})

Populating options for select using v-for VueJS after handling load data event

1 Answers