Загрузка API Vue.js - PullRequest
Новая
       5

Загрузка API Vue.js

0 голосов
/ 29 октября 2018

Я студент, и я только начинаю использовать Vue. Я делаю это приложение, которое отображает информацию о поездах, но оно не показывает никаких данных, когда я выбираю элементы из API. Это также не дает никаких ошибок в консоли.

main.js: 

new Vue({
  el: "#app",
  data: {
    treinen: []
  },
  mounted() {
    fetch("https://api.myjson.com/bins/owxas")
      .then(response => response.json())
      .then((items) => {
        this.treinen = items;
      })
  },
  template: `
    <div class="flex">
     <div v-for="trein, i in treinen">
       <h1>{{ trein.title }}</h1>
     </div>
    </div>
  `,
});

HTML: 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>treinen</title>
<style>

</style>
</head>

<body>
  <h1>treinen</h1>

  <div id="app"></div>

  <script src="https://unpkg.com/vue"></script>
  <script src="main.js"></script>
</body>

</html>

API:

https://api.myjson.com/bins/owxas

Снимок экрана с вкладкой "Моя сеть":

enter image description here

1 Ответ

0 голосов
/ 29 октября 2018

Ваш API возвращает объект, который выглядит следующим образом: 

{
  description: "Feed met alle treinstoringen en werkzaamheden op het Nederlandse spoornet."
  home_page_url: "https://www.rijdendetreinen.nl/"
  items: [{
    id: "disruption-24194-nl",
    title: "Amsterdam-Gouda: werkzaamheden elders",
    …
  }, …]
  title: "Rijden de Treinen"
  version: "https://jsonfeed.org/version/1"
}

Я думаю, что вы действительно хотите перебрать свойство items объекта, и в этом случае ваше v-for должно быть: 

<div v-for="(trein, i) in treinen.items">

В качестве альтернативы, если вы хотите, чтобы treinen содержал только исходный массив items, вы могли бы уничтожить свойство items в последней функции-стрелке: 

fetch(...)
    .then(response => response.json())
    .then(({ items }) => { // <-- destructuring items
      this.treinen = items;
    });

Теперь ваш оригинальный v-for (в <div v-for="(trein, i) in treinen">) будет работать как есть, потому что treinen содержит намеченные элементы.

демо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...