Vfrdtyky

I have a weird problem. I'm trying do to a simple time tracking app.

So I have this form.

<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>

And this is my vue code

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 have a component called , what I do is that when someone types the number of hours, I emit that time back to the parent and use the trackTime function to add the time of each project to the allTimes array.

I'm trying to use a computed property calculateTotal to add the times together so I know when a user completed the 100% of hours. But is not updating.

Is really weird, if I use it as a method it works like a charm, but it doesn't work for me because i want it to update as the user is typing and since I'm using a component for the input I can't use keyup events.

I've been trying to figure this out for hours now and nothing. Thanks!

If anyone is having the same problem Sergeon and Roy J where right.

I was doing this

this.allTimes[index] = time;

And that was messing up Vue. I changed the code to

this.allTimes.splice(index, 1, time)

And it works perfect now.

Thanks