8 Tips For Writing Better V-For Loops With Vue 3

💡 Blog Post: https://www.johnkomarnicki.com/articles/8-ways-to-write-better-v-for-loops In this video we explore 8 tips for writing better v-for loops that align with vue's best practices. ----------------------------------------------------------------------------------------------------- Join my channel to support me to continue doing what I love! https://www.youtube.com/channel/UCr0D7PVNOHqB3Td7lVl_LKw/join ----------------------------------------------------------------------------------------------------- Helpful Reference's: Vue V-For Docs: https://vuejs.org/guide/essentials/list.html#v-for ----------------------------------------------------------------------------------------------------- Patreon: https://www.patreon.com/johnkomarnicki Website: https://johnkomarnicki.com/ Twitter: https://twitter.com/john_komarnicki LinkedIn: https://www.linkedin.com/in/john-komarnicki/ ------------------------------------------------------------------------------------------------------- Timestamps: 0:00 Introduction 0:20 What is a v-for loop? 1:22 Tip 1 - use :key attribute 2:24 Tip 2 - v-for loop with an object 3:28 Tip 3 - v-for loop with range (number) 4:17 Tip 4 - v-for loop with template tag 4:33 Tip 5 - no v-if with v-for 5:23 Tip 6 - use computed properties for filtered data 6:16 Tip 7 - access the index 6:52 Tip 8 - avoid using the index for :key ------------------------------------------------------------------------------------------------------- #vue #vue3 #vuevforloop Current Subscribers: 8,169