pedi2/resources/js/components/CategoriasContainer.vue

42 lines
1.3 KiB
Vue

<template>
<div v-show="visible" class="container">
<div class="columns is-multiline is-mobile">
<div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div @click.capture="seleccionarCategoria(categoria)" 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="categoria"></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: this.$rootMiga
}
},
mounted() {
axios.get("/api/categorias").then(response => {
this.categorias = response.data;
});
Event.$emit("migas-setear-como-inicio", this.miga);
Event.$on("categoria-seleccionada", (_) => this.visible = false)
},
methods: {
seleccionarCategoria(categoria) {
this.visible = false;
Event.$emit("categoria-seleccionada",'categoria',categoria);
}
}
}
</script>