Design comparison
SolutionDesign
Solution retrospective
Welcome any suggestions for improvement. Thank You.
Community feedback
- @mbtenkorangPosted 8 months ago
Hello Kim, Congratulation on successfully completing this challenge. Here is a recommendation to improve it.
- For opening and closing the list of questions to view the answers, an ideal solution will be to extract the property {open: false} for each object in the array into a separate data property advisably a falsy value
const activeIndex = ref(null)
then use a method to do the following:
- The function will take the
index
as a parameter. - The function first evaluates the expression
activeIndex.value === index
, if this istrue
it means the answer is open so the return value foractiveIndex
should benull
so that it hides the answer, else the function should assign the index to the value of activeIndexactiveIndex.value = index
to open it.
function toggle(index){ return activeIndex.value = (activeIndex.value === index) ? null : index ; }
- Assign the function to the click event, then use the expression
activeIndex === index
for the v-if directives.
I hope this helps.
HAPPY CODING 😁
Marked as helpful1 - For opening and closing the list of questions to view the answers, an ideal solution will be to extract the property {open: false} for each object in the array into a separate data property advisably a falsy value
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord