JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="ordersmodule">
  <h1>{{ viewmodel.title }}</h1>
  <button v-on:click="viewmodel.loadTopics()" >
  Load Topics
  </button>
  <div id="topics-placeholder" style="border: 1px solid blue; min-height: 20px;">

  </div>
</div>

<div style="border: 1px solid red">
  <div id="topicsmodule">
    <h1>{{ viewmodel.title }}</h1>
    <dashboard-component :viewmodel="viewmodel.dashboard"></dashboard-component>
  </div>
</div>

<template id="dashboardcomponent">
  <div>
    <h2 style="color: blue; font-weight: bold;">{{ viewmodel.title }} <small>{{ viewmodel.date }}</small></h2> 
    <h3 v-for="group in viewmodel.groups" >{{ group.title }} <small>{{ group.date }}</small></h3>
  </div>
</template>

JavaScript

let data = {
  viewmodel: {
    title: "Topics module",
    dashboard: {
      title: "Dashboard",
      date: "",
      groups: []
    },
    details: {
      title: "Details"
    }
  }
};

setInterval(() => {
	//data.viewmodel.dashboard.date = new Date().toTimeString();
}, 1000);

Vue.component('dashboard-component', {
  template: '#dashboardcomponent',
  props: {
    viewmodel: {
    	type: Object,
      required: true
    }
  }
});

var ordersVue = new Vue ({
    el: '#ordersmodule', 
    data: {
    	viewmodel: {
      	title: "Orders Module",
      	loadTopics: function() {
   				let placeholder = document.getElementById("topics-placeholder");
          let topics = document.getElementById("topicsmodule");
          let topicsTemplate = topics.innerHTML;
          topics.remove();
          placeholder.innerHTML = topicsTemplate;
   
   				setTimeout(function() {
             var topicsVue = new Vue ({
                el: '#topics-placeholder', 
                data: data,
            });
          }, 1000);
          
          setTimeout(function() {
          	for(var i = 0; i < 4; i++) {
            	data.viewmodel.dashboard.groups.push({
                title: "Dashboard Group " + (i + 1),
                date: "Initial value of group"
              });
            }
            setInterval(() => {
              data.viewmodel.dashboard.groups[0].date = new Date().toTimeString();
            }, 1000);
          }, 2000);
        } 
      }
    },
});