I encountered an issue while working on a Vue js project. In this project, I have a computed property named total, which calculates the sum of a property called monto in an array named cobrosMarcados. This array is populated when I click a checkbox in the cobros array. However, the problem arises when I have two input date-rangepickers linked to Vue component data variables. Whenever the computed property is triggered, the input values in the date-rangepickers are reset and become empty.
Below is the Vue js code snippet:
new Vue({
el: '#app',
data: {
cobros: [
{id:1,nombre:"Mantenimiento",monto:2000},
{id:2,nombre:"Piscina",monto:2000},
{id:3,nombre:"Seguridad",monto:2000},
],
cobrosMarcados: [],
montoPagado: 0,
vueltoNegativo: false,
fechaInicial: '',
fechaFinal: ''
},
computed:{
total(){
return this.cobrosMarcados.reduce((total, item) => {
return total + Number(item.monto);
}, 0);
},
vuelto(){
let vuelto = this.montoPagado - this.total;
this.vueltoNegativo = vuelto < 0;
return vuelto;
}
},
methods:{
addCobro(index){
let item = this.cobros.find(o => o.id === index);
let found = false;
for (let i = 0; i < this.cobrosMarcados.length; i++) {
if(this.cobrosMarcados[i].id === item.id){
found = true;
this.cobrosMarcados.splice(i,1);
break;
}
}
if(!found){
this.cobrosMarcados.push({
id: item.id,
nombre: item.nombre,
monto: item.monto
});
}
}
}
})
For the full code implementation, you can visit the following link: https://jsfiddle.net/alonsourena/syLrqekm/
I would greatly appreciate any assistance on resolving this issue. Thank you.