JSFiddle - React, Tailwind, and code Playground

by budiadiono

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
<template id="page1">
  <div class="example">
    PAGE 1
    
    <div class="ui red custom button">OPEN POPUP</div>
    <div class="ui custom popup top left transition hidden">
      Try to click Page 2 then back to Page 1 and click this button again
    </div>
    
    <a class="ui button" @click="addItem">Do something</a>
    <pre>{{items}}</pre>
  </div>
</template>

<template id="page2">
  <div>
    PAGE 2
  </div>
</template>

<div id="container">
  <a class="ui button" @click="currentPage='page1'">Page 1</a>
  <a class="ui button" @click="currentPage='page2'">Page 2</a>

  <keep-alive>
    <component :is="currentPage"></component>
  </keep-alive>
</div>

JavaScript

Vue.component('page1', {
  template: '#page1',
  mounted() {
    console.log('render page 1')
    $(this.$el).find('.custom.button')
      .popup({
        popup: $('.custom.popup'),
        on: 'click'
      })
  },
  methods: {
    addItem() {
      this.items.push('new item ' + this.items.length)
    }
  },
  data: function() {
    return {
      items: []
    }
  }
})

Vue.component('page2', {
  template: '#page2',
  mounted() {
    console.log('render page 2')
  }
})

new Vue({
  el: '#container',
  data: {
    currentPage: 'page1'
  }
})