Vue Using vue-charts

Data

{{value}}

Labels

{{value}}

Message

Shut Up

Data Binding

You have to set prop bind="true"
You can bind Your Vue data between vue-charts'

data
labels

vue-charts will auto render when you change the props

Key Code

For more detail. You can press F12. You know what I mean.



    <body>
    <input v-on:keyup.enter="addData" placeholder="Add a Data" ...>
    <input v-on:keyup.enter="addLabel" placeholder="Add a Label" ...>
    <chartjs-line :labels="labels" :data="data" :bind="true"></chartjs-line>
    ...
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
    <script src="js/vue-charts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script>
        Vue.use(VueCharts);
        const app = new Vue({
            el: '#app',
            data:{
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                data:[65, 59, 80, 81, 56, 55, 40],
            },
        });
    </script>