Значение вычисляемого свойства не возвращается правильно из хранилища Vuex на смонтированном / созданном хуке - PullRequest
0 голосов
/ 03 августа 2020

Сценарий
У меня есть настраиваемый компонент, который загружает календарь и простое раскрывающееся меню для установки времени. После того, как пользователь устанавливает дату и время, эти значения отправляются через магазин 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;
        }
    },
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...