screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h3>Vue.js Change Position of Elements in Array</h3> <div id="app"> <h2>Original Order:</h2> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <h2>New Order:</h2> <ul> <li v-for="(item, index) in reorderedItems" :key="index">{{ item }}</li> </ul> <button @click="moveItem()">Move Item</button> </div> <script type="module"> const app = new Vue({ el: "#app", data: { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'], reorderedItems: [] // We'll populate this array with the reordered items }, methods: { moveItem: function () { // Create a copy of the original array var itemsCopy = this.items.slice(); // Move the element at index 2 to index 4 itemsCopy.splice(4, 0, itemsCopy.splice(2, 1)[0]); // Update the reorderedItems array with the new order this.reorderedItems = itemsCopy; } } }); </script> </body> </html>