Nested Semantic Popup

by Andris Vilde

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, idx) in tips" :obj="tip" :key="idx"></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.$nextTick(_ => { 
  $(this.$el).popup({ content : this.obj });
});
      
   }
});


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