无法从给定项目获取上下文是什么？

Question

我想在Vue.js中使用Chart.js制作折线图我想根据价格和日期制作这张图表我有此HTML代码：

     <div class="content">
              <section class="content">
                <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <canvas ref="myChart" width="532.8" height="250"></canvas>
                </div>
                 </div>
                 </section>
        </div>
     </div>

我从服务器上得到了这个元素：

        "sells": [
    {
        "count": "24",
        "price": "966261",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "31",
        "price": "470588",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "8",
        "price": "314518",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "28",
        "price": "576605",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "18",
        "price": "645010",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "26",
        "price": "295104",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "37",
        "price": "303729",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "43",
        "price": "527718",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "35",
        "price": "274219",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "40",
        "price": "471393",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "68",
        "price": "415918",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "3",
        "price": "814208",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "41",
        "price": "839669",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "50",
        "price": "565025",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "21",
        "price": "498100",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "64",
        "price": "458680",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "36",
        "price": "372096",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "61",
        "price": "569098",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "64",
        "price": "519376",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "39",
        "price": "180493",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "39",
        "price": "595028",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "33",
        "price": "55917",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "26",
        "price": "332210",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "34",
        "price": "239726",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "65",
        "price": "984014",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "57",
        "price": "736582",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "57",
        "price": "272335",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "51",
        "price": "235936",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "54",
        "price": "85552",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "64",
        "price": "222069",
        "date": "۹۹/۰۳/۱۰"
    }
],

并且我在this.sells中设置此结果，在date中设置sells的this.dataSet，在price中设置this.labels。我的控制器页面是这样的：

 import Chart from "chart.js";
 import Axios from  "axios";

  export default{
      data(){
         return {
            labels: [],
            dataSet: []     
       }
     },

  methods:{
      setDate() {
        for (let i = 0; i < this.sells.length; i++) {
        this.labels[i] = this.sells[i].date;
        this.dataSet[i] = this.sells[i].price;
    }
   this.createChart();

  },
    createChart() {
       var ctx = this.$refs.myChart


        console.log(ctx);//undefined
        new Chart(ctx, {
        type: "line",
        data: {
            labels: this.labels,
            datasets: [
                {
                    label: "2020 Sales",
                    data: this.dataSet,
                    borderColor: "#fff ",
                    borderWidth: "3",
                    hoverBorderColor: "#39ccaa  ",
                    backgroundColor: [
                        "#39cccc ",

                    ],
                    hoverBackgroundColor: [
                        "#f38b4a",
                        "#56d798",
                        "#ff8397",
                        "#6970d5"
                    ]

                }
            ]
        }
    });
   }

  };




 }

我从服务器卖出并设置为this.sells

    created(){
       Axios.get('/getHomeItem').then(response => {

        if (response.status == 200) {

               this.sells = response.data.sells;

               this.setDate();

           }
        }).catch(error => {
           if (error.response) {
           alert("مشکلی پیش آمده لطفا بعدا تلاش کنید");
        }
    });

 }

当我运行此代码时，出现此错误：

无法从给定的项目中获取上下文

[当我想从console.log中获得this.$refs.myChart时，我得到：

未定义

我不知道我哪里出了错？

任何人都可以帮忙吗？

Answer 1

请注意，在Vue.js中，仅在实例安装后才能访问this.$refs.uniqueName。