I want to make a universal function to use inside mutations and methods. That function receive a parameter and then return a boolean, for example:
estadoFunction(date){
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var fechaActual = new Date(year + "-" + month + "-" + day);
var fechaInicioEvento = new Date(date);
if(fechaInicioEvento > fechaActual){
return true;
}else{
return false;
}
}
I would like use estadoFunction(date) inside methods and mutations, for example:
methods: {
estado(date){
if(this.estadoFunction(date)){
return "Abierto";
}else{
return "Cerrado";
}
}
}
I tried create a mutation and then use it inside another mutation with a commit but estadoFunction(date) return undefined, in the other hand console.log("true") and console.log("false") are working.
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.programas = llamarJsonAction.BD_programas;
//filtro por eventos cerrados y abiertos
llamarJsonAction.Nueva_estructura_proveedor.forEach( item => {
if(this.commit("estadoFunction", item.fechaFin)){
state.actividadesPrimerFiltro.push(item);
}
});
state.actividades = state.actividadesPrimerFiltro.sort((a, b) => parseFloat(a.fechaInicio) - parseFloat(b.fechaInicio));
},
estadoFunction(date){
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var fechaActual = new Date(year + "-" + month + "-" + day);
var fechaInicioEvento = new Date(date);
if(fechaInicioEvento > fechaActual){
console.log("true");
return true;
}else{
console.log("false");
return false;
}
}
}
Could you help me?, that's my complete javascript code:
//componentes
Vue.component('actividades', {
template: /*html*/
`
<div class="col-lg-8">
<template v-for="(item, key) in actividades">
<ul>
<li>{{ estado(item.fechaFin) }}</li>
<ul>
</template>
</div>
`,
computed: {
...Vuex.mapState(['actividades','programas']),
},
methods: {
estado(date){
if(this.estadoFunction(date)){
return "Abierto";
}else{
return "Cerrado";
}
}
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividadesPrimerFiltro: [],
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.programas = llamarJsonAction.BD_programas;
//filtro por eventos cerrados y abiertos
llamarJsonAction.Nueva_estructura_proveedor.forEach( item => {
if(this.commit("estadoFunction", item.fechaFin)){
state.actividadesPrimerFiltro.push(item);
}
});
state.actividades = state.actividadesPrimerFiltro.sort((a, b) => parseFloat(a.fechaInicio) - parseFloat(b.fechaInicio));
},
estadoFunction(date){
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var fechaActual = new Date(year + "-" + month + "-" + day);
var fechaInicioEvento = new Date(date);
if(fechaInicioEvento > fechaActual){
return true;
}else{
return false;
}
}
},
actions: {
llamarJson: async function({ commit }){
const data = await fetch('calendario-2021-prueba.json');
const dataJson = await data.json();
commit('llamarJsonMutation', dataJson);
}
}
});
//Vue
new Vue({
el: '#caja-vue',
store: store,
created(){
this.$store.dispatch('llamarJson');
}
});