JSFiddle - React, Tailwind, and code Playground

by von

HTML

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>



<body>
    <div id="app">
{{chart}}
     <line-chart :data="chart"></line-chart>>
    </div>
    <script src="https://unpkg.com/[email protected]/dist/Chart.bundle.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 var vm = new Vue({
        el: '#app',
      
        data: {
        chart:[]


        },
        methods:{
              
            getChartData: function(){
                   console.log("chartinfo");
                   var vm=this;
                   $.ajax({
                       url: "https://domain.com/sites/VLN/_api/web/lists/getbytitle('JOB')/items",
                       type: 'Get',
                       headers: { accept: "application/json;odata=verbose" },
                       dataType:"html",
                       success: function (data) {
            data= JSON.parse(data);
           
           vm.chart= data.d.results[0].Title;
    
  alert(vm.chart);
 
      
       
        }

        })
    }
        },
        mounted: function() {
            this.getChartData();

        }
    })
</script>

</body>