I am currently trying to incorporate the V-Calendar library into my Vuetify application. Up until now, the app was working fine, but I seem to have hit a roadblock with the correct installation of the V-Calendar library.
Although no error messages are being displayed, the website has suddenly stopped functioning. It just shows a blank white screen with no content at all. I followed the instructions provided in V-Calendar Installation.
The steps I've taken so far:
1. Using NPM
npm install v-calendar
2. Placing v-calendar.js in the plugins folder
- In the same directory as
main.js: Created a new file named./plugins/v-calendar.js
3. Updating v-calendar.js:
import Vue from 'vue';
import VCalendar from 'v-calendar';
// Integrating v-calendar & v-date-picker components
Vue.use(VCalendar);
export default new VCalendar({
});
4. Adjusting main.js:
...
import VCalendar from './plugins/v-calendar';
...
new Vue({
router,
store,
vuetify,
VCalendar,
render: h => h(App)
}).$mount('#app')
UPDATE 1:
I removed v-calendar.js. Updated main.js according to @pretzelhammer's suggestion.
/views/Home.vue:
<v-date-picker v-model="date" />
export default {
name: "Home",
data: () => ({
date: new Date(),
}),
};
Unfortunately, the calendar is still not appearing. The v-calender works fine, but the v-date-picker is not functional.
UPDATE 2:
- 149 Errors:
- Examples:
- [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
- [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
- [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, String, got Date. found in ---> < VDatePicker >
- [Vue warn]: Error in data(): "TypeError: dateString.split is not a function". found in ---> < VDatePicker >
- Examples:
- 1 Warning:
- [Vuetify] Value must be a String, got Date. found in ---> < VDatePicker >
Fix for UPDATE 2:
- I have managed to resolve the following errors by implementing the suggested fix:
- [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
- [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
- Resolution:
v-for="(item, id) in items" :key="id"
instead of:
v-for="item in items" :key="item"