Problems loading a list of Json in Vue.js

Question

note the Javascript code below;

var app = new Vue({
    el:'#app',
    data:{
        bancodedados:[]

    },
    methods:{

    },
    created:function(){
        var self = this;
            self.$http.get('https://swapi.co/api/planets/1/?format=json').then(function(response){
            /*console.log(response); */
            self.bancodedados = response.data;  
        });

    }


});

This is my page;

<table class="table">
        <thead>
            <tr>
                <th>nome</th>
                <th>Title</th>
                <th>Nome</th>
            </tr>   
        </thead>    
        <tbody>
            <tr v-for="bancodedado in bancodedados">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.climate }}</td>
                <td></td>
            </tr>
        </tbody>
    </table>

What is happening is that he is able to load all the list but I can’t visualize as shown below;

Maybe the problem is in html code, just need to know how to fix;

====================================================================

see what appears on my consoles;

gave this result with this command;

console.log(response); 

That means he can load the Json records!

but if it’s with that command;

consoles.log(this.bancodedados);

is quite different;

Answer 1

This url that you have only returns one object. Use another to return an array to use in bancodedados. This other url has an array in the property results.

Example:

new Vue({
  el: '#app',
  data: {
    bancodedados: []

  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('https://swapi.co/api/planets/?format=json').then(function(response) {
      self.bancodedados = response.body.results;
    });

  }


});

table {
  width: 100%;
  display: table;
  table-layout: fixed;
}

table td,
table th {
  display: table-cell;
  text-transform: capitalize;
  text-align: center;
  padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Title</th>
        <th>Diametro</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="bancodedado in bancodedados">
        <td>{{ bancodedado.name }}</td>
        <td>{{ bancodedado.climate }}</td>
        <td>{{ bancodedado.diameter }} Km</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

You’re using it wrong, you’re retrieving the answer like this ... response.data, when it’s actually response.body

Just change that line self.bancodedados = response.response.body;

Jsbin