Заполнение опций для выбора с использованием v-for VueJS после обработки события загрузки данных - PullRequest
Новая
       5

Заполнение опций для выбора с использованием v-for VueJS после обработки события загрузки данных

0 голосов
/ 15 ноября 2018

У меня есть VueJS приложение, написанное с использованием Typescript. Я использую Axios для получения данных из моей базы данных. Это работает хорошо, и в результате я получаю массив, который я ожидал. Когда я делаю console.log в этом массиве, я вижу, что это правильный результат.

Однако, когда я пытаюсь перебрать этот массив, чтобы создать параметры для моего выпадающего списка, я получаю пустой список. Почему результат не появляется, хотя переменная, которую я перебираю, является массивом?

Редактировать: я добавил изображение, показывающее результат Axios (response.data)

enter image description here

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 Ответ

0 голосов
/ 15 ноября 2018

Поскольку ваш 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...