Tengo una selección donde filtro las tareas por semana, mes y año y funciona bien. Pero quiero tener botones junto a la selección donde pueda pasar a la semana anterior o siguiente (si estoy filtrando por semana, de lo contrario, por mes o año). Ahí es donde me quedo atascado.

Por ahora tengo este componente para mi selección:

 export default base({ setup() { const now = DateTime.local() return { items: [ { text: i18n.tc('Current week'), value: now.startOf('week').until(now.endOf('week')), }, { text: i18n.tc('Current month'), value: now.startOf('month').until(now.endOf('month')), }, { text: i18n.tc('Current year'), value: now.startOf('year').until(now.endOf('year')), }, ], label: i18n.tc('Period'), } }, itemText: 'text', itemValue: 'value', })

Estoy importando y usando el componente en otro archivo donde primero declaro en la configuración:

 const dateFilter = ref<string | null>( DateTime.local().startOf('month').until(DateTime.local().endOf('month')).toISODate(), )

Entonces tengo esto calculado:

 const filterTasks = computed(() => { function filterDate(filterDate: string | null, taskDate: string | null) { return filterDate && taskDate ? filterDate > taskDate : false } return tasks.value.filter(task => { if (filterDate(dateFilter.value, task.dateAdd)) { return false } return task.id }), ) })

Luego, en mi plantilla donde uso mi componente de selección:

 <div class="flex gap-2 items-center"> <duration v-model="dateFilter" hide-details /> <div> <v-btn icon><v-icon> chevron_left </v-icon></v-btn> {{ buttonText }} <v-btn icon @click="dateFilter.plus({ weeks: 1 })"> <v-icon> chevron_right </v-icon></v-btn> </div> </div>

Estoy completamente perdido sobre dónde proceder a partir de ahora. También estoy pensando que estoy comenzando de manera incorrecta y también debería cambiar mi componente Seleccionar. Tal vez moverlo al mismo o crear uno nuevo. Alguien que me pueda orientar un poco? :)