Как вытащить данные в таблицу из api-football?

Question

[leviathanchik]

Всем привет.
Нужна помощь с одним футбольным апи.
Запрос который я делаю:

<script>
    var app = new Vue({
      el: '#app',
      data: {
        topscorers: []
      },
      created() {
        fetch("https://sportsop-soccer-sports-open-data-v1.p.rapidapi.com/v1/leagues/%7Bleague_slug%7D/seasons/%7Bseason_slug%7D/topscorers", {
			"method": "GET",
			"headers": {
				"x-rapidapi-host": "sportsop-soccer-sports-open-data-v1.p.rapidapi.com",
				"x-rapidapi-key": "4345984802msh66e6938db04b178p12dea9jsn83a6f1683119"
			}
		})
		.then(response => {
			console.log(response);
		})
		.catch(err => {
			console.log(err);
		});
    }
    })
  </script>

Мне из него надо повытаскивать в таблицу данные. Вот собственно говоря таблица

<table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">Player ID</th>
          <th scope="col">Name</th>         
          <th scope="col">Matches</th>
          <th scope="col">Position</th>
          <th scope="col">Nationality</th>
          <th scope="col">Team Name</th>
          <th scope="col">Goals</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="topscorer in topscorers">
          <td>{{ topscorer.player_id }}</td>
          <td>{{ topscorer.fullname }}</td>
          <td>{{ topscorer.matches }}</td>
          <td>{{ topscorer.position }}</td>
          <td>{{ topscorer.nationality }}</td>
          <td>{{ topscorer.team }}</td>
          <td>{{ topscorer.goals }}</td>
        </tr>
      </tbody>
    </table>

Я в этом деле начинающий, и не до конца понимаю почему у меня данные не выводятся в таблицу. Сижу уже днями, смотрю разные туториалы и ничего не получается. Вот решил посоветуватся с Вами.
p.s api который я использую

Answer 1

[Игорь]

Какой вы молодец, спалили токен и даже дали ссылку от чего токен. Вот это я понимаю уважение к хакерам)
А если серьезно, то результат который приходит ответом с сервера, просто выводится в консоль.

.then(response => {
      console.log(response);
    })

Вам нужно либо получать эти данные до создания Vue компонента, либо передавать в data данные из created функции.
Если верить в то что написано в документации что вы приложили, то вот как нужно

var app = new Vue({
  el: '#app',
  data: {
    topscorers: []
  },
  created() {
    fetch("https://sportsop-soccer-sports-open-data-v1.p.rapidapi.com/v1/leagues/%7Bleague_slug%7D/seasons/%7Bseason_slug%7D/topscorers", {
        "method": "GET",
        "headers": {
          "x-rapidapi-host": "sportsop-soccer-sports-open-data-v1.p.rapidapi.com",
          "x-rapidapi-key": "4345984802msh66e6938db04b178p12dea9jsn83a6f1683119"
        }
      })
      .then(responseJSON => {
        return responseJSON.json()
      })
      .then(response => {
      	this.topscorers = response.data.topsorers
      })
      .catch(err => {
        console.log(err);
      });
  }
})

Comments

[leviathanchik]

Сделал по-другому, спасибо за ответ)

p.s токен и так в открытом доступе :)

[Игорь]

Так опубликуйте свое решение. Этот сервис создан не только что бы автору вопроса помочь, но и остальным с аналогичным вопросом.

[Игорь]

Ну или отметьте мое решение, если оно правильное.