Laravel、Vue.jsでSPAを作る際のエラー

前提・実現したいこと

Laravel、Vue.jsを使用し、SPAを作成したい
そのためにまずは投稿一覧ページを正常に表示させたい

https://www.positronx.io/create-laravel-vue-js-crud-single-page-application/
こちらのサイトを参考にしています。

発生している問題

JavaScript、CSSを設定してるにも関わらず、ブラウザ上で投稿一覧ページを開くと、このように表示されます。

[{"id":8,"title":"aa","body":"aaaaa","created_at":"2021-03-08T09:12:46.000000Z","updated_at":"2021-03-08T09:12:46.000000Z"},

{"id":6,"title":"\u3053\u3093\u306b\u3061\u306f","body":"\u3053\u3093\u306b\u3061\u306f\uff01","created_at":"2021-03-06T05:36:06.000000Z","updated_at":"2021-03-06T05:36:06.000000Z"},

{"id":5,"title":"\u3042\u3042","body":"\u30c6\u30b9\u30c8\u30c6\u30b9\u30c8","created_at":"2021-03-06T05:33:11.000000Z","updated_at":"2021-03-06T05:33:11.000000Z"}]

試したこと

UIの部分に問題があると考えたので、

composer require laravel/ui

php artisan ui vue

npm install

npm run watch

この4つのコマンドを順番に実行するも特に変化はありませんでした。

気になるのが、vueのバージョンを確認してみると、

npm list vue

work@ /work
+-- vue-axios@3.2.4
| `-- vue@2.6.12 deduped
`-- vue@2.6.12

と表示されました。

補足情報（FW/ツールのバージョンなど）

macOS Big Sur
バージョン 11.2.1

Vue.js
バージョン 2.6.12

ほぼ一日調べていますが、エラー文も出てこないため推測するしかなく、自力で解決できそうにありません。
ご教示いただければと思います。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

このように表示されます。

これはエラーメッセージではないので、エラーと表記するのは不適切でしょう。

このように表示されます。

このようなデータをJSONと言います。
Vueでこのように表示されるのは、JSオブジェクトがStringにキャストされる時に自動的にJSONとしてエンコードして文字列化されるためです。
本来表示されるべきはJSオブジェクトの中身の文字列ではないですか？
ちなみに配列になっているのでv-forなどで1個ずつ取り出す必要があります。
まずはLaravelは置いといてVueだけ勉強されてはどうでしょうか

投稿2021/03/09 12:22