screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>Vue Js nextTick function</h1> <h2>My List of Items:</h2> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <button @click="addItem">Add Item</button> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { items: ["Item 1", "Item 2", "Item 3"], }; }, methods: { addItem() { this.items.push(`Item ${this.items.length + 1}`); this.$nextTick(() => { // This code will execute after the DOM has been updated with the new item const newItem = document.querySelector(`li:nth-child(${this.items.length})`); newItem.style.color = "red"; }); }, }, }); </script> </body> </html>