Vue.component('categorias-container', {
  template: `
    <div class="container">
      <div class="columns is-multiline is-mobile">
        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
          <div class="card" style="height:100%">
            <div class="card-content">
              <div class="media">
                <div class="media-content" style="overflow:hidden">
                  <p class="title is-6" v-text="catego"></p>
                </div>
              </div>
            </div>
          </div><!-- END CARD -->
        </div><!-- END BLOCK COLUMN -->
      </div><!-- END COLUMNS -->
  </div><!-- END CONTAINER -->`,
  data() {
    return {
      categorias: null
    }
  },
  mounted() {
    axios.get("/api/categorias").then(response => {
      this.categorias = response.data;
    });
  }
});

Vue.component('productos-container', {
  template: `
    <div class="container">
      <div class="columns is-multiline is-mobile">
        <div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
          <div class="card" style="height:100%">
            <div class="card-image">
              <figure class="image is-4by3">
                <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
              </figure>
            </div>
            <div class="card-content">
              <div class="media">
                <div class="media-content">
                  <p class="title is-6" v-text="producto.nombre"></p>
                  <p class="subtitle is-7" v-text="producto.proveedor_id"></p>
                  <p class="subtitle is-7" v-text="producto.precio"></p>
                </div>
              </div>
            </div>
          </div><!-- END CARD -->
        </div><!-- END BLOCK COLUMN -->
      </div><!-- END COLUMNS -->
    </div><!-- END CONTAINER -->`,
  data() {
    return {
      productos: []
    }
  },
  mounted() {
    axios.get("/api/productos").then(response => {
      console.log(response.data);
      this.productos = response.data.data;
    });
  }
});