79602612

Date: 2025-05-01 22:30:14
Score: 1
Natty:
Report link

I managed to do that by creating a a new component for each entry https://codepen.io/azmvth/pen/PwwQWvj

const app = Vue.createApp({
    data() {
        return {
            log: []
        }
    },

    methods: {
        add() {
            const self = this

            const n = window.btoa(String(Date.now()))
            self.log.push(n)
            
            const a = {
                data() {
                    return {
                        started: 0,
                        passed: 0
                    }
                },
                created() {
                    const _self = this
                    _self.started = Date.now()
                    
                    setInterval(()=>{
                        _self.passed = Math.floor((Date.now()-_self.started)/1000)
                    }, 1000)
                },
                template: `<div>Entry added {{passed}} ago!</div>`
            }
            
            app.component(n, a)
        }
    }
})

app.mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.min.js"></script>
<div id="app">
    <component v-for="l of log" :is="l"></component>
    <div style="margin-top: 1rem"><i>Click the button to add a new entry </i><button @click="add()">+</button></div>
</div>

Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Pedro Fernandes