Dynamic attributes (or whatever it might be called)

#1

I’m having som trouble getting things to work when looping thru collections of different things. I want to be able to activate a vuetify dialog using v-model, and close it with a @click event handler. Best would be to be able to have the variables triggering this in an array, but I have not been able to index that from the v-model or eventhandler. The result is that all instances of the dialog and the eventhandler shares the same variable. Look at the sample below. Any tips on how to make every itteration use a separate variable?

<v-row no-gutters v-for="si in schedule.scheduleitems">
	<v-container>
		<v-sheet>
			<v-row>
				<v-dialog v-model="sieditdialog"> <!-- max-width="290"-->
					<template v-slot:activator="{ on }">
						<v-btn fab dark x-small color="green" v-on="on"><v-icon dark>mdi-pencil</v-icon></v-btn>
					</template>
					<v-card>
						<v-card-title>
							<span class="headline">Edit Scheduleitem</span>
						</v-card-title>
						<v-card-text>
							<v-container>
								<v-row>
									<v-text-field label="Trigger time" placeholder="Enter a time" v-model="si.timearg"></v-text-field>
								</v-row>
								<v-row>
									<v-btn  color="green darken-1" text @click="sieditdialog=false">Close</v-btn>
								</v-row>
							</v-container>
						</v-card-text>
					</v-card>
				</v-dialog>
			</v-row>
		</v-sheet>
	</v-container>
</v-row>
```html
#2

This is a clear indication that you need to further breakdown your code into components. If you created a component for the row and looped over that component then each component has its own state/scope and therefore you can easily open the dialog within each instance.

#3

Blockquote
This is a clear indication that you need to further breakdown your code into components

Thanks. Will try. The environment is limited, so it is not straightforward. Is there any way to use local variables values when setting v-model and/or click events?

#4

For a simple application it works using a property on the itterated object (in this case like si.dialogOpen). Using a key in the v-for is also recommended. Works well in this case.

However appliation has been broken down in components now so this is not an issue anymore.