In a Vue instance, I have an Array with the name of "block" that holds 4 values. I render this Array to the DOM with a v-for:
<div class="block" @click="shuffleArray()">
<div v-for="(number, index) in block">
<span :class="[`index--${index}`]">{{ number }}</span>
</div>
</div>
this creates a div with 4 spans inside, each of which has a class of "index--0", "index--1", etc.
When clicked, the values of the Array change order:
shuffleArray: function() {
const shifted = this.block.shift();
this.block.push( shifted );
}
While the values do change, they don't move in the actual DOM, how can I achieve that when clicked, the spans actually change place in the DOM? Each span has a style applied to it so I would like a visual representation that the values do change order:
span.index--0 {
background-color: tomato;
}
span.index--1 {
background-color: khaki;
}
span.index--2 {
background-color:lavenderblush;
}
span.index--3 {
background-color: lightcoral;
}
Maybe there is a CSS only solution that does not require DOM manipulation.