forked from nathalie/pedi2
85 lines
1.8 KiB
JavaScript
85 lines
1.8 KiB
JavaScript
window.Event = new Vue();
|
|
|
|
Vue.component('region-select', {
|
|
template: `
|
|
<div class="block">
|
|
<label class="label">Seleccioná tu región</label>
|
|
<div class="select">
|
|
<select>
|
|
<option>Seleccionar</option>
|
|
<region-option v-for="region in regiones" v-text="region" :name="region"></region-option>
|
|
</select>
|
|
</div>
|
|
</div>`,
|
|
data() {
|
|
return {
|
|
regiones: []
|
|
}
|
|
},
|
|
mounted() {
|
|
axios.get("/api/regiones").then(response => this.regiones = response.data);
|
|
}
|
|
});
|
|
|
|
Vue.component('region-option', {
|
|
template: `<option @click="onRegionClicked""></option>`,
|
|
methods: {
|
|
onRegionClicked() {
|
|
Event.$emit("region-seleccionada",this.$attrs.name);
|
|
}
|
|
}
|
|
});
|
|
|
|
Vue.component('barrio-select', {
|
|
template: `
|
|
<div v-show="visible" class="block">
|
|
<label class="label">Seleccioná tu barrio o grupo de compra</label>
|
|
<div class="select">
|
|
<select>
|
|
<option>Seleccionar</option>
|
|
<gdc-option v-for="grupo in gdc" v-text="grupo.nombre" :name="grupo.nombre"></gdc-option>
|
|
</select>
|
|
</div>
|
|
</div>`,
|
|
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: `<option @click="onGDCClicked""></option>`,
|
|
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);
|
|
});
|
|
}
|
|
}); |