Ich glaube nicht, dass dies unbedingt ein Vue-basiertes Problem ist, aber ich habe Probleme.

Ich möchte eine Vue-Variable auf die Zeichenfläche schreiben. Wenn ich vue entferne, funktioniert mein anfänglicher Code einwandfrei. Wenn ich jedoch Vue hinzufüge, startet der Canvas nicht wirklich.

Hier ist mein Code

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

var v = new Vue({
  el: '#app',
  data: {
    'exampleContent': 'This is TEXT'
  },
  watch: {
    exampleContent: function(val, oldVal) {
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = "black";
      ctx.font="20px Georgia";
      ctx.fillText(this.exampleContent,10,50);
    }
  }
});

Wenn ich auskommentiere/* var v = new Vue({ ... das anfängliche Bit funktioniert. Wenn ich den Wert von @ protokollieexampleContent im watcher funktioniert das auch. Aber irgendetwas auf der Leinwand funktioniert nicht.

Demo zum Spielen mit:http: //codepen.io/EightArmsHQ/pen/EgGbgR? editors = 1010