44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div v-show="visible" 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 @click.capture="seleccionarCategoria(catego)" 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 -->
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
categorias: null,
|
||
|
|
visible: true,
|
||
|
|
miga: {
|
||
|
|
nombre: "Categorías",
|
||
|
|
href: "/productos"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
axios.get("/api/categorias").then(response => {
|
||
|
|
this.categorias = response.data;
|
||
|
|
});
|
||
|
|
Event.$emit("migas-setear-como-inicio",this.miga);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
seleccionarCategoria(categoria) {
|
||
|
|
this.visible = false;
|
||
|
|
Event.$emit("categoria-seleccionada",categoria);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|