Lravel6 とvue3で開発中のアプリ。
単一コンポーネント、「canvas-component.vue」の<script>内に書いた画像が出力されません。
javascript
1<!-- CanvasComponents.vue--> 2 3<template> 4 <canvas id="canvas" width="320" height="320" ref="canRef"></canvas> 5</template> 6 7<script> 8 export default({ 9 data: { 10 canvas: null, 11 ctx: null, 12 img: null 13 }, 14 mounted: function() { 15 let self = this 16 self.canvas = self.$refs.canRef 17 self.ctx = self.canvas.getContext('2d') 18 self.img = new Image() 19 self.img.src = 'image/canvas.png' 20 self.img.onload = function() { 21 console.log('loaded') 22 self.ctx.drawImage(self.img, 0, 0); 23 } 24 } 25 }) 26</script>
<div id="app">は@extends('layouts.app')内にあります。HTML
1{{-- home.blade.php --}} 2 3@extends('layouts.app') 4@section('content') 5 <div class="container"> 6 <div class="row justify-content-center text-center"> 7 <div class="col-md-8"> 8 <canvas-component></canvas-component> 9 </div> 10 </div> 11 </div> 12@endsection 13
上記コードで実行すると、画像は出力されず、デベロッパーツールのコンソールに
「Uncaught TypeError: dataOptions.call is not a function」 と出力されます。
CanvasComponents.vueのdataの書き方を確認したのですが、記述に誤りは無いように思っています。
疑問に思っているのは、
VueCLIはグローバルではインストールされています。しかし、プロジェクトファイル内のターミナルで「vue -V」と打つと、「zsh: command not found: vue」 となります。
プロジェクトにVue CLIがインストールされていないのが原因か?とも思ったのですが、これは、問題ないのでしょうか?
(プロジェクト内で「npm install -g @vue/cli コマンドは実行して、インストールも完了済)
そもそもの<script>コードに誤りがあるのか?
scriptコードを眺めても間違いに気づけません。。。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。