JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="main"></div>
<template id="app">
  <ul>
    <li v-for="i in n" :ref="el => listElements.push(el)">{{ i }}</li>
  </ul>
</template>

<template id="test">
  
</template>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Babel + JSX

console.clear()


const app = Vue.createApp({
  template: '#app',
  data: () => ({
    n: 5,
    listElements: [],
  }),
  beforeUpdate() {
    this.listElements.length = 0
  },
  async updated() {
    await this.$nextTick()
    console.log(this.listElements)
  },
  mounted() {
    console.log(this.listElements[0])
    setTimeout(() => this.n++, 500)
  },

  methods: {
    log() {
      console.log('log')
    }
  }
})

/*app.component('test', {
 template: '#test'
})*/

app.mount('#main')