Невозможно заполнить массив данных для плагина VueJS Calendar динамическими данными хранилища Vuex - PullRequest
Новая
       7

Невозможно заполнить массив данных для плагина VueJS Calendar динамическими данными хранилища Vuex

1 голос
/ 07 октября 2019

У меня есть компонент Calendar в приложении VueJS, созданный плагином vue-sweet-calendar. Компонент корректно отображается с использованием статических данных, но когда я закомментирую эти данные (как видно из кода ниже) и попытаюсь заполнить массив реальными данными, сгенерированный массив будет пустым.

Вот компонент: 

<template>
  <div id="calendar-card">
    <!-- Using Component -->
    <calendar
      :eventCategories="eventCategories"
      :events="events"
      ref="calendar"
    />
  </div>
</template>

<script>
// Importing Component and style
import { Calendar } from 'vue-sweet-calendar'
import 'vue-sweet-calendar/dist/SweetCalendar.css'
import ActsService from '@/services/ActsService'

export default {
  name: 'CalendarCard',
  data() {
    return {
      eventCategories: [
        {
          id: 1,
          title: 'Personal',
          textColor: 'white',
          backgroundColor: 'Blue'
        },
        {
          id: 2,
          title: 'Company-wide',
          textColor: 'white',
          backgroundColor: 'red'
        }
      ],
      events: [
        // SAMPLE Calendar data commented out
        // {
        //   title: 'Event 1',
        //   start: '2019-10-02',
        //   end: '2019-10-02',
        //   repeat: 'never',
        //   categoryId: 2
        // },
        // {
        //   title: 'Event 2',
        //   start: '2019-10-08',
        //   end: '2019-10-08',
        //   repeat: 'never',
        //   categoryId: 2
        // },
        // {
        //   title: 'Event 3',
        //   start: '2019-10-10',
        //   end: '2019-10-10',
        //   repeat: 'never',
        //   categoryId: 2
        // },
        // {
        //   title: 'Event 4',
        //   start: '2019-10-23',
        //   end: '2019-10-23',
        //   repeat: 'never',
        //   categoryId: 2
        // }
      ]
    }
  },
  computed: {
    userActs() {
      return this.$store.getters.userActs
    },
  },
  mounted() {
    this.$store.dispatch("getUserActs");
    this.setEvents();
  },
  methods: {
    goToday() {
      this.$refs.calendar.goToday()
    },
    setEvents() {
      console.log('setting events using these userActs: ', this.$store.state.userActs)
      this.$store.state.userActs.forEach(function(item) {
        events.push({
          item: {
            title: item.deed,
            start: item.created_at,
            end: item.created_at,
            repeat: 'never',
            categoryId: 2
          }
        })
      })
      console.log('these are the calendar events', this.events);
    }
  },
  components: {
    Calendar // Registering Component
  }
}
</script>

В консоли Chrome Vue я вижу, что state.userActs заполнен 4 объектами Act, однако console.log(this.$store.state.userActs) возвращает массив с 0 элементами.

1 Ответ

0 голосов
/ 07 октября 2019

В консоли Chrome Vue я вижу state.userActs, заполненный 4 объектами Act, однако console.log(this.$store.state.userActs) возвращает массив с 0 элементами.

Это звучит как ваш VuexХранилище заполняется / обновляется после , когда ваш компонент смонтирован.

Я бы предложил создать вычисляемое свойство для events, чтобы оно автоматически обновлялось при появлении новых данных хранилища.

Например 

computed: {
  userActs() {
    return this.$store.getters.userActs
  },
  events() {
    return this.userActs.map(item => ({
      title: item.deed,
      start: item.created_at,
      end: item.created_at,
      repeat: 'never',
      categoryId: 2
    }))
  }
}

Также удалите events из вашего data. Вам больше не понадобится setEvents() метод.

...