Vue

by Max Sinev

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<div id="app">
   <div class="ui list relaxed divided">
     <chart v-for="chart in charts" :key="chart"></chart>
   </div>
</div>

<script type="text/x-template" id="chart">
<div class="item">
  <div class="header"><strong>{{ id }}</strong></div>
  <div class="description" v-if="renderComplete">
    <tip v-for="tip in tips" :obj="tip"></tip>
  </div>
  <div class="description" v-else>
    Loading...
  </div>
</div>
</script>

<script type="text/x-template" id="tip">
<div class="ui label">
  {{ obj.toFixed(3) }}
</div>
</script>

CSS

strong {
  font-weight: bold;
}

p {
  font-size: 10px;
}

Vue

let base = {
    data() {
        return {
            renderComplete: false
        }
    },
    mounted() {
        setTimeout(() => this.renderComplete = true, Math.random() * 2000);
    }
}


Vue.component('chart', {
   extends: base,
   template: '#chart',
   data() {
       return {
           id: Math.random(),
           tips: [Math.random(), Math.random(), Math.random()]
       }
   }
});

Vue.component('tip', {
   template: '#tip',
   props: ['obj'],
   mounted() {
      $(this.$el)
        .popup({
          content : this.obj
        })
   }
});


new Vue({
  el: "#app",
  data: {
    charts: Array(6).map(() => Math.random())
  }
})