JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="app">
    <ul class="list">
        <v-ml_component v-for="item in get_data" 
                    v-bind:item="item" 
                    v-bind:index="item.name" 
                    v-bind:key="item.id" 
                    v-bind:message="messageType">
        </v-ml_component>
    </ul>
</div>

<template id="list-template">
    <li>
        <span>{{ index }}
        </span>
        <span>{{item.price_usd}}</span> : {{message}}
    </li>
</template>

JavaScript

Vue.component('v-ml_component', {
  template:'#list-template',
  props:['index', 'item', 'message']
});

var vm = new Vue({
  el:"#app",
  data:{
    messageType: '',
    get_data: ''
  },
  mounted(){
  	var self = this
  	$.getJSON('https://api.coinmarketcap.com/v1/ticker/?limit=10').done(function(ajaxdata){
    self.messageType = 'inbox'
    self.get_data = ajaxdata
  })
  }
});