Сценарий
У меня есть настраиваемый компонент, который загружает календарь и простое раскрывающееся меню для установки времени. После того, как пользователь устанавливает дату и время, эти значения отправляются через магазин Vuex. Убедившись, что эти значения установлены правильно, я пытаюсь получить данные с помощью вычисляемого свойства times
, которое должно возвращать массив объектов, таких как [{start_time: "2020-08-12T01:00:00.000Z", end_time: "2020-08-12T02:00:00.000Z"}]
, который является тем, что пользователь выбрал и впоследствии сохранен в магазине. однако по какой-то причине я получаю пустой массив на смонтированном хуке, когда я console.log(this.times)
.
Test. vue
<template>
<div>
<div class="settings-section" v-for="(t,idx) in times" :key="idx">
<div class="date-time-cross" v-if="times.length > 1">
<img width="20px" height="20px" src="~/assets/svgs/bin.svg" v-on:click="removeDate(idx)" />
</div>
<div>
<span>Event starts</span>
<v-dtpicker
:ref="`dtstart${idx}`"
:value="t.start_time"
@input="handleValueChange($event, idx, 'start_time')"
/>
<span class="error-msg" v-show="!t.start_time && errors_['date']">This field is required.</span>
<span
class="error-msg"
v-show="t.start_time > t.end_time"
>The start time needs to be before the end of the event.</span>
</div>
<div>
<span>Event ends</span>
<v-dtpicker
:ref="`dtend${idx}`"
:value="t.end_time"
@input="handleValueChange($event, idx, 'end_time')"
/>
<span class="error-msg" v-show="!t.end_time && errors_['date']">This field is required.</span>
</div>
<hr class="hr-t" v-if="times.length > 1" />
</div>
</div>
</template>
<script>
import VDtpicker from "~/components/v-datetime/v-dtpicker.vue";
import VTimepicker from "~/components/v-datetime/v-timepicker.vue";
export default {
layout: "noFooter",
data() {
return {
errors_: {
name: null,
host: null,
address_string: null,
venue: null,
description: null,
banner: null,
date: null,
recurrent_rule_weekday: null,
recurrent_rule_time_start: null,
recurrent_rule_time_end: null,
recurrent_rule_from: null,
recurrent_rule_until: null,
},
};
},
components: {
VDtpicker,
VTimepicker,
},
mounted() {
console.log("THE TIME IS:: ", this.times);
if (this.times.length > 0)
this.dateSlots();
},
methods: {
dateSlots() {
this.$store.commit("timeDetails/addTime", {
start_time: null,
end_time: null,
});
},
handleValueChange(time, idx, type) {
switch (type) {
case "start_time":
this.$store.commit("timeDetails/updateTime", {
value: time,
field: "start_time",
event_time_idx: idx,
});
break;
case "end_time":
this.$store.commit("timeDetails/updateTime", {
value: time,
field: "end_time",
event_time_idx: idx,
});
break;
}
},
},
computed: {
times: {
get() {
return this.$store.state.timeDetails.details.times;
},
set(value) {},
},
},
};
</script>
timeDetails. js
export const state = () => ({
details: {
times: []
}
});
export const mutations = {
addTime(state, time) {
console.log('store - time received', time);
state.details.times.push(time);
},
updateTime(state, time) {
switch(time.field) {
case 'start_time':
state.details.times[time.event_time_idx][time.field] = time.value;
break;
case 'end_time':
state.details.times[time.event_time_idx][time.field] = time.value;
break;
}
},
}