Question

我在由vue-sweet-calendar插件生成的VueJS应用程序中有一个日历组件。该组件可以使用静态数据正确渲染，但是当我注释掉该数据（如下面的代码所示）并尝试用真实数据填充数组时，生成的数组为空。

以下是组件：

<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个元素的数组。

Answer 1

在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()方法。

无法使用动态Vuex存储数据填充VueJS日历插件的数据数组

1 个答案: