[Vuejs]-Repeated elements have the same expand variable

0👍

You’ve got several options.

The example is a bit artificial as it uses <div v-for="item in 3" :key="item">. In a real use case you’d likely be iterating over an array of objects and you could hold a show value within each object.

If storing it in the objects isn’t an option then you could (somewhat painfully) maintain a separate array for the show values, using the index to tie the two arrays together.

But probably the best solution is to extract a new component. Generally when you have a v-for with some sort of editable state it is worth considering extracting a new component as it usually ends up being the simplest solution. In this case those components could each hold their own show value.

So:

<div v-for="item in 3" :key="item">

would become:

<my-new-component v-for="item in 3" :key="item">

and you’d move all the rest of the template into my-new-component.

0👍

OK thank you i will Test this

I found an example to do this

https://v2.vuejs.org/v2/guide/components.html

Leave a comment