Consume Json Vuejs2 with Axios

Question

I’m trying to popular a list with a JSON, but I’m having problems. I can only make the list by placing Inline in the array, but there is only one item in the list and I cannot make it populated with all the items in the list. I do not know if I could be clear. The codes are:

<template>
  <header>
    <div class="row produtos">
        <div class="container">
          <div class="title-bar">
            <div class="col s6">
              <h2 class="titulo-produtos">Produtos</h2>
            </div>
            <div class="col s6">
              <input type="text" class="search-bar" placeholder="Pesquisar...">
            </div>
          </div>
          <hr>

          <div class="row">
            <div class="col s12">
              <ul class="tabs">
                <li class="tab col s3"><a href="#test0">Athos</a></li>
                <li class="tab col s3"><a href="#test1">Troad</a></li>
              </ul>
            </div>
            <div >
              <ul>
                <li v-for="(index, key) in product" :key="index.id">
                  <div :id="'test'+key" class="col s12">

                    <!-- Itens -->
                    <div class="item valign-wrapper">
                      <div class="row">
                        <div class="col s2 imagem">
                          <img :src="index.produtos[0].logo" class="responsive-img" :alt="index.produtos[0].title">
                        </div>
                        <div class="col s2 titulo">
                          <h3>{{index.produtos[0].title}}</h3>
                        </div>
                        <div class="col s7 descricao">
                          <p>{{index.produtos[0].descricao}}</p>
                        </div>
                        <div class="col s1 checkbox">
                          <p>
                            <input :id="index.produtos[0].descricao" name="group3" class="filled-in" type="checkbox" />
                            <label :for="index.produtos[0].descricao"></label>
                          </p>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
        </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
    import axios from "axios";
    export default {
      created() {
        axios.get(`https://api.myjson.com/bins/wionj`).then(response => {
          let data = response.data;
          this.product = Object.keys(data).map(key => data[key]);
        });
      },
      data() {
        return {
          product: []
        }
      },
      mounted: function() {
        $('.ul.tabs').tabs();
        $('#test0').addClass('active');
      }
    };
</script>

For example, <img :src="index.produtos[0].logo" class="responsive-img" :alt="index.produtos[0].title"> only returns the first image, but if I put the products without the index does not return me anything. JSON is this:

{
    "Athos": {
        "produtos": [
            {
                "logo": "https://www.athos.com.br/assets/img/logos/webminio.png",
                "title": "Webm�nio",
                "descricao": "Webm�nio � o Portal de informa��es e servi�os que sua Administradora de Condom�nios precisa para atender melhor seu cliente. � a solu��o que aplica tecnologia de ponta para ampliar a satisfa��o do seu cliente condominial."
            },
            {
                "logo": "https://www.athos.com.br/assets/img/logos/atentum.png",
                "title": "Atentum",
                "descricao": "Atentum � o sistema ideal para melhorar a gest�o do atendimento da sua empresa.Com ele, sua empresa ter� a melhor solu��o digital de atendimento, ajudando a elevar a satisfa��o do seu cliente e a reduzir as falhas no retorno das quest�es que seus clientes demandam."
            },
            {
                "logo": "https://www.athos.com.br/assets/img/logos/condoplaza.png",
                "title": "Condoplaza",
                "descricao": "CondoPlaza � o sistema ideal para melhorar sua �rea de compras. Com ele, sua empresa ter� a melhor solu��o em gest�o de compras condominiais, e sua equipe ter� a melhor ferramenta para aumentar a produtividade nas diversas atividades dentro do processo de compras."
            }

        ]
    },

    "Troad": {
        "produtos": [
            {
                "logo":  "http://www.troad.com.br/images/logoporteiroligado.png", 
                "title": "Porteiro Ligado",
                "descricao": "Porteiro Ligado � a maneira mais inteligente de reciclar os profissionais de portaria para melhorar a seguran�a condominial."
            },
            {
                "logo": "http://www.troad.com.br/images/logoportariaonline.png",
                "title": "Webm�nio",
                "descricao": "O Portaria Online � um sistema que otimiza as atividades di�rias dos condom�nios, proporcionando maior seguran�a, organiza��o e controle."
            },
             {
                "logo": "http://www.troad.com.br/images/logoportariadigital.png",
                "title": "Webm�nio",
                "descricao": "Mais do que registrar a entrada de visitantes, a portaria � um dos principais pontos de seguran�a de um empreendimento. Apesar de se falar muito em seguran�a eletr�nica e automa��o predial, a grande maioria das portarias mal possui um cadastro atualizado dos usu�rios (moradores, funcion�rios, prestadores de servi�o, entre outros)."
            }                  

        ]
    }
}

Answer 1

I think what you’re looking for is two v-for.

The first with

v-for="(index, key) in product"

where you extract Athos and Troad, and then the other v-for to iterate the array of each of these:

v-for="(item, i) in index.produtos"

new Vue({
  created() {
    axios.get(`https://api.myjson.com/bins/wionj`).then(response => {
      this.product = response.data;
    });
  },
  data() {
    return {
      product: []
    }
  }
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, key) in product" :key="key">
      <h3>{{key}}</h3>
      <div :id="'test'+key" class="col s12">

        <!-- Itens -->
        <div class="item valign-wrapper" v-for="(item, i) in index.produtos" :key="i">
          <div class="row">
            <div class="col s2 imagem">
              <img :src="item.logo" class="responsive-img" :alt="item.title">
            </div>
            <div class="col s2 titulo">
              <h3>{{item.title}}</h3>
            </div>
            <div class="col s7 descricao">
              <p>{{item.descricao}}</p>
            </div>
            <div class="col s1 checkbox">
              <p>
                <input :id="item.descricao" name="group3" class="filled-in" type="checkbox" />
                <label :for="item.descricao"></label>
              </p>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>

</div>

Answer 2

Barter:

this.product = Object.keys(data).map(key => data[key]);

For:

this.products = data.produtos;