Tengo una página que muestra los cumpleaños por mes de los equipos. Con dos botones que te permiten cambiar el mes actual.

La solución con v-if funciona bien, pero como no es una buena práctica, intento con una propiedad calculada.

 <tr v-for="birthday in birthdays" :key="birthday.name" v-if="birthday.month[month]"> <td class="px-6 py-4 whitespace-nowrap"> <div class="flex items-center"> <div class="text-sm font-medium text-gray-900"> {{ birthday.name }}

Ejemplo de datos de cumpleaños:

 [ { "month": { "1": false, "2": false, "3": true, "4": false, "5": false, "6": true, "7": true, "8": false, "9": true, "10": false, "11": true, "12": false }, "name": "team 2" }, { "month": { "1": false, "2": false, "3": true, "4": false, "5": false, "6": true, "7": true, "8": false, "9": true, "10": false, "11": true, "12": false }, "name": "team 1" } ]

y mi código con la propiedad calculada:

 export default { data() { return { birthdays: {}, month: false, }; }, async asyncData({ $axios, store }) { let email = store.state.auth.user.email; let month = new Date().getMonth() + 1; let { data } = await $axios.get("/birthday/?email=" + email); return { birthdays: data, month: month }; }, methods: { nextMonth() { if (this.month === 12) { this.month = 1; } else this.month = this.month + 1; }, previousMonth() { if (this.month === 1) { this.month = 12; } else this.month = this.month - 1; }, }, computed: { fiestas: function () { let birthdays = this.birthdays; for (let team in birthdays) { if (!birthdays[team].month[this.month]) { birthdays.splice(team, 1); } } return birthdays; }, }, };

Esto funciona para el mes actual (con unos pocos ms o vemos los datos antes de los computados) pero cuando cambiamos el mes no funciona nada como si se hubieran modificado los cumpleaños.

¿Quizás en mi caso es mejor quedarse en un v-si?