I'm facing an interesting issue. I am currently developing a simple time tracking application.
Here is the form I have created:
<form class="form" @submit.prevent="saveHours">
<div class="status">
<div class="selector" v-for="(select, index) in select_all">
<component :is="select" :id="index" @percentage="trackTime"></component>
</div>
</div><!-- /.status -->
<div class="form-submit">
<button type="submit" class="form__submit">
<span v-if="loading">Guardando...</span>
<span v-else>Guardar</span>
</button>
</div>
</form>
Next, you can find my Vue code snippet below:
export default {
name: 'home',
data() {
return {
select_all: [Selector],
loading: false,
allTimes: [],
saveForm: []
}
},
components: {
Selector
},
computed: {
calculateTotal() {
return this.allTimes.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue), 0);
}
},
methods: {
addNewSelector() {
this.calcTotal();
this.select_all.push(Selector)
},
trackTime(time, index, proyecto) {
this.currentTime = time;
this.allTimes[index] = time;
const data = {
time,
proyecto
}
this.saveForm[index] = data;
},
saveHours() {
const currentWeek = moment(new Date()).format('w');
const diverRef = db.collection('divers').doc(firebaseAuth.currentUser.email);
const currentWeekRef = diverRef.collection('reportes').doc(`semana_${currentWeek}`);
var self = this;
currentWeekRef.get().then(function(doc) {
if ( doc.exists ) {
console.log('Ya registraste tus horas');
} else {
currentWeekRef.set({
data: self.saveForm
})
}
});
},
}
}
I've implemented a component called , where I emit the time entered by the user back to the parent and utilize the trackTime function to add each project's time to the allTimes array.
I'm attempting to use a computed property named calculateTotal to sum up the times so I can track when a user has completed 100% of their scheduled hours. However, it seems like the total isn't updating as expected.
This situation is quite perplexing. While using the computed property as a method works perfectly fine, it doesn't update dynamically while the user is inputting values. Since I've employed a component for the input field, I cannot rely on keyup events.
I've been grappling with this challenge for quite some time now without any breakthroughs. Any insights are highly appreciated! Thanks!