Unwinding The StackOverflow Post — “Wrong index is passed to v-dialog when using v-for”
Daniel Smedema’s answer enables the Vuetify user to use multiple v-dialog’s with individual close buttons
(Note: This is a series where I attempt to go a little deeper into popular StackOverflow posts. If you are here because you are looking for the solution, please just refer to the StackOverflow post).
Someone pointed me here recently because I had encountered an interesting bug in Vuetify. Like the OP, I was attempting to wrap a v-dialog inside a v-for, and it was leading to very strange behavior. I would click inside one box and trigger the variable for another.
Use Case: A developer wants to wrap v-dialog inside v-for without getting the wrong index, and the developer also wants individual close buttons to work
Solution: A user named Daniel Smedema creates a codepen with the following line of HTML
<v-dialog persistent scrollable max-width=”300px” v-model=”dialog[indexp]”>
Instead of using a single variable in v-model, he has created an array called dialog
Versions: Vue 2, Vuetify 2
Discussion
First, let me address the elephant in the room: Yes, this is Vue2/Vuetify2, and the question was answered in 2020. I still use Vue2 because I have been in stasis for the last four years.
List rendering is explained here in the official Vue.js documentation, but their examples are fairly cut-and-dried. For example, they provide this playground link.
Their example uses the mustache syntax to display some variables. Nothing mind-blowing.
The OP’s broken CodePen link, on the other hand, attempts to use these two lines of HTML
<v-list-item v-for=”(pool,indexp) in items[0].pools” :key=”pool.name”>
<v-dialog v-model=”dialog” scrollable max-width=”300px”>
As Daniel points out, dialog is used for everything in the v-for, so activating one will activate them all. This leads to an interesting back-and-forth where Daniel suggests simply removing the v-model entirely, but the OP states the importance of individual close buttons. This leads to the correct code that uses an array for dialog, instead of just expecting the user to click away to close the dialog.
Motivation
I had hoped this post would be a little longer, but the solution, at least as stated in the CodePen “toy” example, was fairly straightforward.
I like how the question draws the reader into some HTML weirdness — I think this can sometimes be just as confusing as the JavaScript portions. Plus, there are quite a few things you can do with Vuetify projects using static hosts like GitHub pages. I may be able to use this to debug some old personal projects.
Closing Thoughts
I wasn’t sure what to put here, so attached is a YouTube video about China’s first corgi police dog:
