質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

1474閲覧

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

Takumim

総合スコア12

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2021/03/09 11:03

前提・実現したいこと

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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


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

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

投稿2021/03/09 12:22

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Takumim

2021/03/09 12:56

mikkameさん ご回答いただきまして、ありがとうございます。 はい、JSオブジェクトの中身の文字列を表示しようとしています。 v-forは記述しているので、そこは大丈夫そうですが、おっしゃる通りまずはVueの勉強をしっかり時間とってやろうと思います。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問