JSFiddle - React, Tailwind, and code Playground

by ktsn

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <span v-for="m in first" :key="m">{{
    m
    }}</span>

  <span v-for="m in second" :key="m">{{
    m
    }}</span>

  <span v-if="suffix">
    ... {{ suffix }}
  </span>
</div>

JavaScript

const vm = new Vue({
	el: '#app',
  data() {
    return {
      first: ['One'],
      second: ['Two', 'Three'],
      suffix: null
    }
  },
  updated() {
		if (!this.suffix) {
	    this.suffix = this.second.pop()
    }
  }
})

setTimeout(() => {
  console.log('Updating')
	vm.second = ['Two', 'Three', 'Four', 'Five']
}, 3000)