如何在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)
}
}
}
这是我的数据库结构,以防您需要:
并且无论如何我都可以不单击按钮来检索数据?我已经尝试过在mount()中调用该方法,但是在控制台中我看不到它给我的数据:
[ ob :观察者]