Within a Vue component, I have an Array named "block" that contains 4 values. These values are displayed in the DOM using a v-for directive:
<div class="block" @click="shuffleArray()">
<div v-for="(number, index) in block">
<span :class="[`index--${index}`]">{{ number }}</span>
</div>
</div>
This code generates a div with 4 spans inside, each assigned a class of "index--0", "index--1", and so on.
When the div is clicked, the order of the values in the Array changes:
shuffleArray: function() {
const shifted = this.block.shift();
this.block.push( shifted );
}
Despite the values changing, they do not visually rearrange within the actual DOM. Is there a way to make the spans change position in the DOM when clicked? Each span has a unique background color applied to it, so a visual representation of the order change is desired:
span.index--0 {
background-color: tomato;
}
span.index--1 {
background-color: khaki;
}
span.index--2 {
background-color: lavenderblush;
}
span.index--3 {
background-color: lightcoral;
}
It would be great if there was a CSS-only solution that does not involve manipulating the DOM directly.