forked from nathalie/pedi2
65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
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;
|
|
});
|
|
}
|
|
}); |