JavaScript関連で出たエラーのメモ。

Vue.jsの勉強がてらのアプリ製作中に出たエラーを備忘録としてここにまとめます。エラー内容は多種多様。同じエラーが出た方がいれば参考にしてみてね(^_-)-☆
随時更新します。

1. Chart.jsを使っていた時。

『 “export ‘default’ (imported as ‘Chart’) was not found in ‘chart.js’』というエラーが出た。
Chart.jsのバージョンが原因。最新のものだとうまく動かないとのこと。
↓↓のこちら記事で解説あり。

なので、インストールし直せばOK。

$ npm uninstall vue-chartjs
$ npm uninstall chart.js

$ npm install chart.js@2.8
$ npm install vue-chartjs@3.4.2

2. forEachを使おうとした時。

『TypeError: _this.data.forEach is not a function』というエラーが出た。
これはajaxを使っている時だったが、戻ってくるデータが配列になっていなかったのが原因。
↓↓のようなコントローラーで、（バックエンドLaravel使ってました、）『return[]』とするとオブジェクトで返ってきてしまうので、そこを『return response()->json($products);』と書き換えれば、配列で返ってきて問題解決した。

    public function index()
    {
        $products = Product::orderByDesc('year')->get();
        // return ['products' => $products];
        return response()->json($products);
    }

3. Vue.jsでimgのsrc属性にv-forを使おうとした時。

2021/12/14追記。
Vue.jsでimgタグのsrc属性にローカルのjsonファイルのURLを指定したかった時です。
結論から言うと、以下のようにするとうまくいきました。HTMLでtable使ってます。

<tr v-for="(song, index) in songs" :key="id">
　<th>{{ song.id }}</th>
　<td>{{ song.title }}</td>
　<td>{{ song.artist }}</td>
　<td><img :src="song.src" /></td>
</tr>

調べてみると、Vue.jsでimgタグのsrc属性の書き方はちょっと気をつけなければいけないみたいで、require()を使うとか、publicフォルダにおいて絶対パス指定するとかあったんです。
それを参考に、
<img :src="{{ song.src }}" /> とか、<img :src="require({{ song.src }})" /> とか、<img :src="require("song.src")" /> とか色々書いていたけど、全部エラーになったよね。うーむ。なんかjsonファイルからの読み込みにはシンプルに<img :src="song.src" /> と書けばよかったようです。