处理加载数据事件后使用 v-for VueJS 填充选择选项

Question

我有这个使用 Typescript 编写的VueJS应用程序。我正在使用Axios从我的数据库中获取数据。这很有效，我得到的结果是一个数组，这正是我所期望的。当我console.log在这个数组上做时，我可以看到它是正确的结果。

但是，当我尝试遍历这个数组来为我的选择下拉列表创建选项时，我得到一个空白列表。为什么即使我循环的变量是一个数组，结果也没有出现？

编辑：我在这里添加了一张图片，显示了 Axios 结果 ( 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>

Answer 1

由于您result是一个包含一个项目的对象，因此该项目是一个routes在这种情况下调用的数组，您应该result.routes像这样循环：

 <option v-for="routes in result.routes" v-bind:key="routes.name" v-bind:value="routes.name"> {{ routes.name }} </option>

额外示例：

 <option v-for="routes in result.routes" v-bind:key="routes.name" v-bind:value="routes.name"> {{ routes.name }} </option>

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 => {

      })
    }
  }

})