20230526_Episode 3 Mighty Bites Capture V For Elements In Perfect Order by Alex Vipond Forge
Out of the box, Vue template refs aren’t ideal when you’re trying to capture elements rendered by v-for. Vue will store all your elements, but the list of elements will fall out of sync with your app’s data. You can use function refs to solve this problem, and make sure that your DOM element reference always stay perfectly in sync with the rest of your app.
Source code:
Template Ref: #eNqlVV P2zYM/yqENyDOEDt3OWwPTi649nHA2odhT/VhVSw6Uc WDElOLgj83UdJ/pN01wJFH5KQFPUj SOpXKJ3TZMeW4yyaGOxbipmcZtLgA3TVhQVgrHnCh/ziAtDp cMygpf1/474UJjYYWSGRSqamu5hj1rMlhprNfQMM6F3PdqHnlcQt611ioZFBjxa6b3QiZa7A82A9ZaRVcGp6eiEsULeZWVaAZzj dNAXkZoIdAXBx7MSiDDHBMSqUJLpZtvQAhOb7O6QeY1lNQgOwFz T1 dcL XWfb44E/8aJxpJOsDKTccwC4HIBugFdNya2nNK8kU2g9oqg1 QkuD1k8BAI/pGW3N/0gOCbq6Q KItwUCewBwSlOWpQpVeMVRo5YIU1SmtAmGBmNQIrLTk6tRTaWCqceNTpVNgU4iba 9Yu4HRA6e8S5ezscDX6yBQtbjSaEGhTKI5b1 LN0osQWgxWgRF16 Z1vpiw38qZKzmz0DacfN09alBFHHlfiadQ8DfS1jhhD43YseJlr1UreUIUK53BL6vVau349grnfA1vjPO0EL4ZsPOBE824aE0G6er30KNxakLxH51X5icntKbrei4oVR221aXdz0vY3mW/vqRtlleLTaovg8Tf4OJcQ6IZ3K1zSUNJOP25cy20aCwYtK0jRdSN0hYujsEFKPkeaYvwH08sdZTZ4uDMfxE1lhrQQalVDTN6XmYOrlCSpoT6DY8OIXbcv3Pdj/ Yp6WoqvhuntasieN/x5183PbSfEKg1eoRPj2TORgDNVfmXN4mGMcejS6nR1a1SL6jX59x7 JpCUMxeP7598cPqbGauifKczyC HSxCsCp4C7Njj4AufR8xE6mkmlEc3sF/zMBADo/8Rfa NbQczBrlLEzoO5dseR2hoCvYooSYkolAH 6e4aty6xX75/nwSu3o5Guj3Jq6AXGeJ4aGoE4ZgvYeWQGiZOoXkrLsYtDgT8EsyMYFmobxtDP3jZaRGHsEmIi/WKUpL qkGh/QO9sNsTMIxo2p fRwdrGZMtlK5uXfVqoevlEZ0tNnRY1JlzVTw/pQ3qXsKo5sPR RW vsdfnKZo62Wl1MtSoLxSmf2d8EFo3fXTb6x89pL N7wT9yvfNwF/5/C/4wE3U/Qdm/H4x
Function ref: #eNqlVM1u2zAMfhUiG1BnSJwuw3Zw0mDdccBaYMOwQ1OsikUnQmXJkOSmQeB3HyX5JwHaQ7FDYpKiPpIfSR1H11WVPtU4ykZLh2UlmcPVWgEsmXEilwjWHSRerUdcWDo9ZFBIfF6E/ykXBnMntMog17Iu1QK2rMpgbrBcQMU4F2rbqutRwCXkTe2cVlGBHr9kZivU1IjtzmXAaqfpSuf0NZcifySvQoqqM7d4wRSRZxG6C8TFUytGpZMBnqaFNgSXqLqcgFAcn8f0AWbMEBQge8QDeT28P5Jf83B2JPhrJwYLOkIJVysoahUI olFgrILNbj3 QEcj0BY0DR9yrOhgDPZRtJPqHue7gV3uww Rerf0qyPZ90h OokqRvtEHZ6D26HoA1HA7oIinXaIAeUWKJyFoSNZlYisMKRo1cLYawDg1S2SYfChhBn0f7sUIVr1Ad28JAGQ1AKlFQGbYyxzDXHle/7chZEiH0Hp8GKsvZDPJ4MsC lW1ecvPwNapckYoKXwn2s8pVcDQ6oHfsblj9uja4VnxKv2mTwbj6fLzzJQeGcL CF6R72I3QANiHw1DAuaptBOv8cG9OPSiz71ntlYVxiP5qmZYFSNXF5fdrtkMRlnrXbTNpydrLnpIYySPwAR 8aE83gcrFWNImE055719yIyoFFV3tSRFlp4 DoGZyAVt Qlgp/B2InsGcu33nzD6LGEfUNFEaXcEGvzYWHy7Wi0aBOw5VHSDz3177vyZdxWggpk8txWrIqSf72K0obFaXxgIDStgh392SOxkjNibk7OFlIOj7ZSY8dGBCFN489bvrEZI13weGe3FEGUtbqvNgkCbf7C TZxuyrb11CgDhgnef3X7c3qXWGJkEUB4rcgoTS4yOCMhXcl9zQD2CtAreJl4k GvS1O4H/nwAATdibIz0ZtaX35KLS1l0AFX3KIW2eJ cM0ql5evyHlY s1b9eD OXmvXG l6L6eWHndMxqmlcUoSNoFNQGYw9RLVS2l5drEr8E0wG4JhsbZupMMcr0bNP9QWP3c=
Check out Alex’s book about Vue 3 function refs and composables
Visit Vue School
Pre-Order the official certification of competence for the Framework
Join Vue School’s Hiring Program
Do you want to master Nuxt 3?
Mastering Nuxt 3 Course
Contact us
team@