Question

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

但是，当我尝试遍历该数组以为我的select下拉列表创建选项时，我得到一个空白列表。即使我要遍历的变量是数组，为什么还没有显示结果？

编辑：我在此处添加了一张图片，显示了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>

其他示例：

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

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-axios@2.1.4/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>

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

1 个答案: