Vue.js dies. $ El.getContext ('2d') ist keine Funktion

Question

Ich bin mit Vue.js Version 2 und Charts.js herumalbern, um eine Komponente zu erstellen, die ich Daten übergeben kann und es wird angezeigt die auf eine nette Art und Weise. Das ist mein Code:

<template> 
    <div class="container"> 
    <canvas width="900" height="400"></canvas> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['customers','dates'], 
     mounted() { 
      console.log('Chart-Component mounted.'); 
      var context = this.$el.getContext('2d'); 
      console.log(context); 
      var myChart = new Chart(context, { 
       type: 'line', 
       data: { 
        labels: this.dates, 
        datasets: [{ 
         label: '# of Votes', 
         data: this.customers, 
         backgroundColor: [ 
          'rgba(255, 99, 132, 0.2)' 
         ], 
         borderColor: [ 
          'rgba(255,99,132,1)' 
         ], 
         borderWidth: 3, 
         cubicInterpolationMode: 'monotone', 
         lineTension: 0 
        }] 
       }, 
       options: { 
        scales: { 
         yAxes: [{ 
          ticks: { 
           beginAtZero:true 
          } 
         }] 
        } 
       } 
      }); 

     } 
    } 
</script> 

Wenn ich der Leinwand eine ID geben und den Kontext über erhalten:

document.querySelector('#graph').getContext('2d'); 

es funktioniert ganz gut, aber dann kann ich meine Komponente nur einmal der ist offensichtlich nicht das, was Ich will. Also habe ich versucht, über den Kontext zu bekommen:

this.$el.getContext('2d'); 

aber dann bekomme ich die folgende Fehlermeldung:

[Vue warn]: Error in mounted hook: "TypeError: this.$el.getContext is not a function"

ich gegoogelt und das Dokument überprüft, aber um ehrlich zu sein ich wirklich bin neu zu vue und Ich bin nicht wirklich sicher, wonach ich mehr suchen könnte ...

Also wenn jemand mir helfen könnte oder mir sagen könnte, was ich als nächstes überprüfen sollte, würde es sehr geschätzt werden! Danke

Answer 1

this.$el in diesem Fall ist eine Referenz auf div#container. Was Sie tun möchten, ist eine ref verwenden.

ref is used to register a reference to an element or a child component. The reference will be registered under the parent component’s $refs object

<div class="container"> 
    <canvas ref="canvas" width="900" height="400"></canvas> 
</div> 

Und dann

this.$refs.canvas.getContext('2d')