Вычисляемое свойство не обновляется

У меня странная проблема. Я пытаюсь сделать простое приложение для учета рабочего времени.

Итак, у меня есть такая форма.

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

А это мой код vue

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
                    })
                }
            });
        },
    }
}

У меня есть компонент, который называется, и что я делаю, так это то, что когда кто-то вводит количество часов, я отправляю это время обратно родительскому элементу и использую функцию trackTime, чтобы добавить время каждого проекта в массив allTimes.

Я пытаюсь использовать вычисляемое свойство calculateTotal для сложения времени, чтобы я знал, когда пользователь отработал 100% часов. Но не обновляется.

Это действительно странно, если я использую его как метод, он работает как шарм, но у меня он не работает, потому что я хочу, чтобы он обновлялся, когда пользователь вводит текст, и поскольку я использую компонент для ввода, я могу '' t использовать keyup событий.

Я уже несколько часов пытаюсь понять это, но ничего. Спасибо!


person Saúl Solórzano    schedule 15.11.2018    source источник
comment
Ваши вычисления зависят от allTimes. Вы изменяете его на this.allTimes[index] = time;. Но вы не можете этого сделать, реактивность vue прерывается, если вы изменяете массив по индексу: vuejs.org/2016/02/06/common-gotchas/   -  person Sergeon    schedule 15.11.2018
comment
comment
Большое спасибо!   -  person Saúl Solórzano    schedule 15.11.2018


Ответы (1)


Если у кого-то такая же проблема, Sergeon и Roy J, где прав.

Я делал это

this.allTimes[index] = time;

И это мешало Vue. Я изменил код на

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

И теперь он отлично работает.

Спасибо

person Saúl Solórzano    schedule 15.11.2018