Psalm daily readings toggle switch JS error

blocher / dailyoffice2019

This project is used to build the website https://www.dailyoffice2019.com. The site invites you to join with Christians around the world in praying with the Church, at any time or in any place you may find yourself. It makes it easy to pray daily morning, midday, evening, and compline (bedtime) prayer without flipping pages, searching for scripture readings or calendars, or interpreting rubrics. The prayers are presented from The Book of Common Prayer (2019) of the Anglican Church in North America and reflect the ancient patterns of daily prayer Christians have used since the earliest days of the church.

MIT License

33 stars 15 forks source link

Reproduction Steps

Go to https://www.dailyoffice2019.com/readings/2024/2/3
Open the Chrome inspector
Scroll down to the Psalms
Toggle the 30 Day / 60 Day switch

Expected Results

No console errors

Actual Results

The following JS error is displayed: Uncaught (in promise) TypeError: Cannot set properties of null (setting 'checked') at switch2.mjs:114:21

Additional Information

This is because the Reading.vue template is conditionally rendered via v-if instead of v-show. Using v-if takes the entire block of HTML out of the DOM entirely, so the JS is no longer able to update the input. The element-plus switch element's JS can not access the missing input, therefore it gives a JS error.

I recommend using v-show instead of v-if in the Reading.vue template. I don't think that keeping the HTML in the DOM will be a huge performance issue.

blocher / dailyoffice2019