問題の切り分け

昨日大苦戦していた不具合、結局散々疑ったフロントエンドではなくバックエンドの問題でした。
しかもカッコがひとつ多いとかいう些細なことが原因でした……。
今回やろうとしていたのは、まずLaravelで生成したデータベースをAPIで渡せるようにします。
その際データは自動的にJSON形式に変換されます。
これをNuxt.jsの「useFetch」という関数が受け取り、
分割代入でデータはdataという変数に入ります。この際、JSON形式は連想配列に自動変換されます。
さらにVue.jsのv-forというディレクティブを使って、
いわゆるforeachのように連想配列を１行ごとに展開します。
最後に展開されたデータをマスタッシュ構文で表示させれば完成。
データベースの中身がHTML形式で自動ループによって１行ずつ表示されるというわけです。

このとき注意しなければならないのは、LaravelからNuxt.jsに渡すJSONの中身。
v-forディレクティブは何も指定しなければあくまでも最初の階層を基準に展開します。
もし第二階層に展開されるべきデータが入っていたら、
v-forディレクティブは表示されるべきデータを全部１行目に出力してしまいます。
昨日はこの状況をJSONが文字列として出力されていると勘違いしたわけですね。
Laravel側で準備したデータが$dataに格納されているとき、
[$data]のようにカッコで囲むと$data自体は第２階層になってしまいます。
このカッコを取れば万事解決というわけ。
たぶん、$dataの他にも格納しようとしていた経緯があって第２階層になっていたんでしょう。

とにかくJSON周りで不具合があったら中身を見てみるのも大事かもしれません。
中身を見る方法としては、「Postman」というアプリを使うとAPIをテストすることができ、
JSON形式でも生の形式でもデータの取得をチェックできるので便利です。
500エラーとかもキャッチしてくれるのでAPI生成以前と以後の問題の切り分けも簡単になります。
こういうツールは積極的に使って問題解決を早めていきたいところですね。

ともあれようやく一歩前進しました。自分がNuxt.jsを理解するのはまだまだ先になりそう……。