window.Event = new Vue(); Vue.component('region-select', { template: `
`, data() { return { regiones: [] } }, mounted() { axios.get("/api/regiones").then(response => this.regiones = response.data); } }); Vue.component('region-option', { template: ``, methods: { onRegionClicked() { Event.$emit("region-seleccionada",this.$attrs.name); } } }); Vue.component('barrio-select', { template: `
`, data() { return { visible: false, region: null, gdc: [] } }, mounted() { Event.$on('region-seleccionada', (region)=> { this.fillGDC(region); this.visible = true; }); }, methods : { fillGDC(region) { this.region = region; axios.get("/api/grupos-de-compra").then(response => { this.gdc = response.data[this.region]; }); } } }); Vue.component('gdc-option', { template: ``, methods: { onGDCClicked() { Event.$emit("gdc-seleccionado",this.$attrs.name); } } }); new Vue({ el: '#root', mounted() { Event.$on('gdc-seleccionado', (gdc) => { console.log('se seleccionó el gdc ' + gdc); }); } });