<template>
  <div>
    <table>
      <tr>
        <th>Waluta</th>
        <th>Kod ISO</th>
        <th>Kurs</th>
      </tr>
      <template v-for='item in table'>
      <tr :key='item.code'>
        <td>{{item.currency}}</td>
        <td>{{item.code}}</td>
        <td>{{item.mid}}</td>
      </tr>
      </template>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'app',
  data: () => ({
    table: [
      {currency: 'polski zloty', code: 'PLN', mid: 1}
    ],
  }),
  mounted() {
    this.api().get('exchangerates/tables/a/')
    .then(response => response.data[0].rates.forEach(i => this.add(i)));
  },
  methods: {
    add(el) {
      this.table.push(el)
    },
    api() {
      return axios.create({
        baseURL: 'https://api.nbp.pl/api/',
        timeout: 1000,
        headers: {Accept: 'application/json'}
      })
    }
  }
}
</script>

<style>

</style>