Componente:
<template>
<v-layout wrap>
<v-sheet height="500">
<v-calendar ref="calendar" v-model="start" :now="today"
color="primary">
<template v-slot:day="{ date }">
<template v-for="event in eventsMap[date]">
<v-menu :key="event.index" v-model="event.open">
<template v-slot:activator="{ on }">
<v-chip small v-ripple v-on="on">
{{event.type}}
</v-chip>
</template>
</v-menu>
</template>
</template>
</v-calendar>
</v-sheet>
Script:
<script>
import db from '@/firebase'
import format from 'date-fns/format'
export default {
data () {
return{
type: 'month',
today: format(new Date(),"YYYY-MM-DD"),
start: format(new Date(),"YYYY-MM-DD"),
end: '2019-04-01',
events: []
}
},
computed: {
eventsMap () {
const map = {}
if(this.events != []){
this.events.forEach(e => (
map[e.start_date] = map[e.start_date] || []
).push(e)
)
}
return map
}
},
created(){
db.collection('events').onSnapshot(res => {
res.forEach(doc => {
this.events.push(doc.data())
})
})
}
}
</script>
En donde obtengo un array al inicio y mapeo con la función 'eventsMap' para así pintar en mi calendario las fechas obtenidas Mi problema está que al agregar otra fecha o realizar cualquier modificación el pintado se duplica, Lo que quiero hacer es pintar solamente los cambios en mi calendario..
Json(return de Variable computada 'eventsMap') :
{
2019-03-28:[
description: "..."
employee: "User"
start_date: "2019-03-28"
type: "vacation"
],
2019-04-28:[
description: "..."
employee: "User"
start_date: "2019-04-28"
type: "vacation"
]
}
if(!this.events || this.events.lenght == 0)
estas comparando objetos distintos(los arrays tambien son objetos, pero especiales) al hacer [] esta haciendo un new Array() – JackNavaRow el 27 mar. 19 a las 19:14