MAMAMMA
50
2019-07-11 10:51:56
1
170

(초보) Vue js methods 에서 선언한 값이 자꾸 not defined 라고 뜹니다 ㅠㅠ



처음 시작시 작동이되지않고

버튼 리스너를 작동할 때만 정상 작동합니다 왜이러는걸까요...ㅠㅠㅠ


ERROR: 

myCahrt is not defined


아래는 코드입니다!


<template>

    <div id="app5">

      <canvas id="planet-chart"></canvas>

      <button v-on:click="createChart('planet-chart',planetChartData)">click-me</button>


    </div>

</template>







<script>

    import Chart from 'chart.js';

    export const planetChartData = {

          type: 'line',//'bar'

          data: {

            labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'],

            datasets: [

              { // one line graph

                label: 'Number of Moons',

                data: [12, 55, 1, 2, 67, 62, 27, 14],

                backgroundColor: [

                  'rgba(54,73,93,.5)', // Blue

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)'

                ],

                borderColor: [

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                ],

                borderWidth: 3

              },

              { // another line graph

                label: 'Planet Mass (x1,000 km)',

                data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2],

                backgroundColor: [

                  'rgba(71, 183,132,.5)', // Green

                ],

                borderColor: [

                  '#47b784',

                ],

                borderWidth: 3

              }

            ]

          },

          options: {

            responsive: true,

            lineTension: 1,

            scales: {

              yAxes: [{

                ticks: {

                  beginAtZero: true,

                  padding: 25,

                }

              }]

            }

          }

        }



    export default {

        name: 'app5',

        methods:{

          createChart(chartId, chartData) {

            const ctx = document.getElementById(chartId);

            const myChart = new Chart(ctx, {

              type: chartData.type,

              data: chartData.data,

              options: chartData.options,

            });

            myChart.data.datasets[0].data[0] = 100;

            myCahrt.update();

          }

        },


        data(){

          return{

            planetChartData: planetChartData

          }

        },

        beforeMount(){

          //this.createChart('planet-chart',this.planetChartData);

        },

        computed: {


        },

        mounted() {

          this.createChart('planet-chart',this.planetChartData);

        }

    }

</script>


0
0
  • 답변 1

  • ksshim86
    1k
    2019-07-11 11:21:06

    myCahrt 오타

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.