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

我使用Typescript编写了这个VueJS应用程序。我正在使用Axios从数据库中获取数据。这工作得很好，我得到的结果是一个数组，这正是我所期望的。当我对这个数组执行

console.log

时，我可以看到它是正确的结果

但是，当我尝试循环此数组以创建“选择”下拉列表的选项时，会得到一个空白列表。为什么即使我循环使用的变量是数组，结果也不会出现

编辑：我在这里添加了一张显示Axios结果的图片（

response.data

）

{{routes.name}
加载数据

由于您的

结果

是一个包含一个项目的对象，该项目是一个名为

路由

的数组。在这种情况下，您应该循环查看

结果。路由

如下所示：

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

{{user.name}
加载数据

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

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