My two favourite tricks in Vue (only 26 hardcovers left!)

Hey there, I've got 26 hardcover copies of the Vue Tips Collection left, and they're going fast. If you're still not sure, the best way to get a feel for the book is to read a few pages. So, I've got two tips for you today that I pulled straight from the book. Tip #1 – Destructure inside v-for Did you know that you can destructure in a v-for? <li v-for="{ name, id } in users" :key="id" > </li> It's more widely known that you can grab the index out of the v-for by using a tuple like this: <li v-for="(movie, index) in [ 'Lion King', 'Frozen', 'The Princess Bride' ]"> - </li> When using an object you can also grab the key: <li v-for="(value, key) in { name: 'Lion King', released: 2019, director: 'Jon Favreau', }"> : </li> It's also possible to combine these two methods, grabbing the key as well as the index of the property: <li v-for="(value, key, index) in { name: 'Lion King', released: 2019, director: 'Jon Favreau', }"> #. : </li> Tip #2 – Think of scoped slots as tiny render functions Here's the best way to think about scoped slots: Scoped slots are like functions that are passed to a child component that returns HTML. Once the template is compiled, they are functions that return HTML (technically vnodes) that the parent passes to the child. Here's a simple list that uses a scoped slot to customize how we render each item: <!-- Parent.vue --> <template> <ScopedSlotList :items="items"> <template v-slot="{ item }"> <!-- Make it bold, just for fun --> <strong></strong> </template> </ScopedSlotList> </template> <!-- ScopedSlotList.vue --> <template> <ul> <li v-for="item in items" :key="item" > <slot :item="item" /> </li> </ul> </template> We can rewrite this example to use a function instead of a scoped slot: <!-- Parent.vue --> <template> <ScopedSlotList :items="items" :scoped-slot="(item) => `<strong>${item}</strong>`" > </template> <!-- ScopedSlotList.vue --> <template> <ul> <li v-for="item in items" :key="item" v-html="scopedSlot(item)" /> </ul> </template> Why you'll want the hardcover on your desk You'll find 118 concise and insightful tips like the two above, each digestible in under a minute. The book is sturdy and full-color, making it a beautifully designed reference you'll actually use. Here are the details again: Price: $47 USD (regular $97) Stock left: 26 copies, first‑come, first‑served No reprints: once this batch ships, that's it! Grab your discounted hardcover now — Michael P.S. Imagine skimming a couple of pages with your morning coffee and committing cleaner code by lunch. That's the power of having the physical book within reach. ​

Unsubscribe