在Vuetify日历中渲染:“ TypeError:无法使用'in'运算符在2019年11月18日搜索'开始'

时间:2019-11-17 23:53:21

标签: vue.js vuejs2 vuex vuetify.js

如何在v-calendar中显示数据库内容?

每次我单击从vuex获取数据的按钮时,都会出现此错误:

  

render:“ TypeError:无法在2019年11月18日使用'in'运算符搜索'start'”

此外,我尝试关注Brad Traversy的视频,该视频使用了vuetify的V-calendar,但我使用的是MySQL

<template>
  <section>
    <v-btn @click="myEvents">RETRIEVE DATA</v-btn>
    <v-row class="fill-height">
      <v-col>
        <v-sheet height="600">
          <v-calendar type="month" now="2019-11-18" value="2019-11-18" :events="events"></v-calendar>
        </v-sheet>
      </v-col>
    </v-row>
  </section>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      events: []
    };
  },
  computed: {
    ...mapGetters(["allEvents"])
  },
  methods: {
    ...mapActions(["retrieveEvents"]),
    myEvents() {
      let dbEvents = [];
      this.allEvents.forEach(element => {
        dbEvents.push(element.start);
      });
      this.events = dbEvents;
    }
  },
  created() {
    this.retrieveEvents();
    this.bradTraversy();
  }
};
</script>

从数据库中检索数据的Vuex。在这里,“我可以成功检索数据并将其传递给我的组件,稍后将在v-calendar中使用

import axios from "axios";

const state = {
    events: []
}
const getters = {
    allEvents: (state) => state.events
}
const mutations = {

    RETRIEVE_EVENTS: (state, myEvent) => (state.events = myEvent),

}
const actions = {
    async retrieveEvents({commit}){
        try {
            const response = await axios.get("http://localhost:9000/event/events");
            commit("RETRIEVE_EVENTS", response.data)
        } catch(err){
            console.log(err)
        }
    }
}

这是我的数据库结构,以防您需要:

db structure

并且无论如何我都可以不单击按钮来检索数据?我已经尝试过在mount()中调用该方法,但是在控制台中我看不到它给我的数据:

  

[ ob :观察者]

0 个答案:

没有答案