У меня странная проблема. Я пытаюсь сделать простое приложение для учета рабочего времени.
Итак, у меня есть такая форма.
<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
событий.
Я уже несколько часов пытаюсь понять это, но ничего. Спасибо!
allTimes
. Вы изменяете его наthis.allTimes[index] = time;
. Но вы не можете этого сделать, реактивность vue прерывается, если вы изменяете массив по индексу: vuejs.org/2016/02/06/common-gotchas/ - person Sergeon   schedule 15.11.2018