Tengo botones para establecer diferentes fechas (una para mañana y otra para dentro de una semana) y he creado una función para calcular solo los días hábiles. Entonces, el botón 'mañana' debería mostrar 'Mañana' o 'Lunes' y el botón 'semana' debería mostrar 'en 7 días', 'en 8 días' o 'en 9 días' dependiendo del día de la semana actualmente es
Estos son mis dos botones:
<v-btn :value="dates[0]" > {{ buttonText }} </v-btn> <v-btn :value="dates[1]" > {{ buttonText }} </v-btn>Este es mi cálculo para las diferentes fechas a posponer y funciona bien:
postponeDays(): DateTime[] { const today = DateTime.local() return [ onlyBusinessDays(today, 1), onlyBusinessDays(today, 7), ] },La función onlyBusinessDays se ve así:
export const onlyBusinessDays = (date: DateTime, nrOfDays: number): DateTime => { const d = date.startOf('day').plus({ days: nrOfDays }) const daysToAdd = d.weekday === 6 ? 2 : d.weekday === 7 ? 1 : 0 return d.plus({ days: daysToAdd }) }Y aquí está mi cálculo para obtener el texto del botón que no funciona y necesito ayuda con:
buttonText(): DateTime | string { if (!this.dates[1]) { if (DateTime.local().plus({ days: 7 }).hasSame(this.dates[1], 'day')) { return 'in 7 days' } if (DateTime.local().plus({ days: 8 }).hasSame(this.dates[1], 'day')) { return 'in 8 days' } else return 'in 9 days' } else { if (DateTime.local().plus({ days: 1 }).hasSame(this.dates[0], 'day')) { return 'Tomorrow' } else return 'Monday' } },Intenté calcular el texto del botón de muchas maneras diferentes, pero siempre termino obteniendo exactamente el mismo texto para ambos botones, lo que se siente extraño ya que la función de posponer para obtener las fechas correctas funciona perfectamente bien. ¿Alguien que sepa lo que estoy haciendo mal? :)
Haz de buttonText un método en su lugar, para que puedas poner {{ buttonText(dates[0]) }} y {{ buttonText(dates[0]) }} .
Como en los documentos de Vue sobre propiedades calculadas :
En lugar de una propiedad calculada, podemos definir la misma función como un método. Para el resultado final, los dos enfoques son exactamente iguales. Sin embargo, la diferencia es que las propiedades calculadas se almacenan en caché en función de sus dependencias reactivas . Una propiedad calculada solo se volverá a evaluar cuando algunas de sus dependencias reactivas hayan cambiado.
Sus dos elementos v-btn no se evalúan con diferentes alcances, por lo que no hay razón para que Vue crea que buttonText tendrá valores diferentes en ambos casos. Lo que desea conceptualmente es que buttonText devuelva diferentes valores en función de la fecha que pasa , lo que se ajusta mucho más a un método en lo que respecta a Vue.
Como en la página de métodos de la guía :
También es posible llamar a un método directamente desde una plantilla. Como veremos en breve, por lo general es mejor usar una propiedad computada en su lugar. Sin embargo, usar un método puede ser útil en escenarios donde las propiedades calculadas no son una opción viable.