Vue.js and Vuetify : Value in for loop doesn't match when using v-dialog

 This issue is relevant if you are using Vue.js and Vuetify.  And was occurring  for me when I was adding a  Dialog ( Pop out ) box in Vuetify .  

Take a look at this code as an example.  

<v-btn

@click.stop="innerdialog = true"

outlined

fab

color="transparent"

height=400

>View image {{ photo.id }}</v-btn>

<v-dialog v-model="innerdialog">

<v-card>

<v-card-title class="headline">

<v-img

:src="photo.id"

>

</v-img>

</v-card-title>

<v-card-actions>

</v-card-actions>

</v-card>

</v-dialog>

So if my array of images is 6 items then oddly the first call to the value 'photo.id' would be  '1' and the second 6 .  And therefore always showing the last photo in my array. 

So I came up with the following solution.  This uses a variable to store the count of where we are to grab it again in the v-card in our v-dialog.  Note: the count is one off so I had to -1 .  The count of where we are is loaded in Click event of the button. 

<v-btn

@click.stop="innerdialog = true; imagecounter = photo.id"

outlined

fab

color="transparent"

height=400

>View image {{ photo.id }}</v-btn>

<v-dialog v-model="innerdialog">

<v-card>

<v-card-title class="headline">

<v-img

:src="photos[imagecounter-1].image_url"

>

</v-img>

</v-card-title>

<v-card-actions>

</v-card-actions>

</v-card>

</v-dialog>

And in the Script section. 

data(){

return{

innerdialog: false,

width: 800,

imagecounter: 1

}

}