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

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

ただいまの
回答率

87.35%

Larave5.5+Vue.js+ axios(ajax通信)でTodoListを作成する

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,777

1.実現したいこと

下記サイト「Laravel × Vue.js × axiosでTODOリストを作るよ!」を参考にLaravel5.5+Vue.js+axiosでTodoListを作成しようと考えております
編集も出来ればやりたいと考えますが取り合えず記事の最後の追加と削除のみができるようになればと考えております。
色々試しましたが、いずれも真っ白い画面のままでした。どなたか分かる方がおりましたら教えて頂ければと思います。お願い致します
参考URL:https://tonyo.design/program/vue-js/todo-list_with_laravel_vue_axios_no1/

イメージ説明

2. 発生している問題・エラーメッセージ

こちらのページのStep3にてDBから値を取得しようとした際に、JavascriptやPHPのエラー表示は出ておりませんが
真っ白になります
https://tonyo.design/program/vue-js/todo-list_with_laravel_vue_axios_no3/
<本来の画面>
イメージ説明
<エラーがある画面>
イメージ説明
上記画面のようにSQLクエリー発行するなく真っ白な画面になります
<DB登録内容>
イメージ説明
DBにはこのようなデータを登録しておりますが、表示されません。

3.該当のソースコード

<PHP>
■ C:\xampp\htdocs\laravel-vue-todo
.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todos
DB_USERNAME=*****
DB_PASSWORD=*****


■ C:\xampp\htdocs\laravel-vue-todo\config
database.php

     'driver' => 'mysql',
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'todos'),
            'username' => env('DB_USERNAME', '*******'),
            'password' => env('DB_PASSWORD', '*****'),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
        ],


■ C:\xampp\htdocs\laravel-vue-todo\app\Models
Todo.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
     protected $table = 'todos';  //モデルとテーブルを紐づけ
     protected $primaryKey = 'id';  //プライマリーキーをidに紐づけ
     public $timestamps = false;  //タイムスタンプを無効にする
}


■ C:\xampp\htdocs\laravel-vue-todo\app\Http\Controllers
TodoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Todo;  
class TodoController extends Controller
{
   public function getTodos(){  
    $todos = Todo::all();      
    return $todos;
  }
}


■ C:\xampp\htdocs\laravel-vue-todo\routes
web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

//Route::get('/', function () { //←今回は使用しないのでコメントアウト
    // return view('welcome');
//});

Route::get('/{app}', function () {  //←追記
  return view('welcome');
})->where('app', '.*'); 

Route::group(['middleware' => 'api'], function() {
  Route::get('get',  'TodoController@getTodos');
});


■ C:\xampp\htdocs\laravel-vue-todo\resources\views
welcom.blade.php

<!doctype html>
  <html lang="{{ app()->getLocale() }}">
    <head>
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{ csrf_token() }}">  <!-- CSRF対策 -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="{{ asset('css/app.css') }}">  <!-- Laravelアセットパス追加 -->
      <title>Laravel-Vue-todo</title>
    </head>
    <body>
      <div id="app"> 
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <br>
            </div>
            <div class="col-xs-6">
              <table class="table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>タスク名</th>
                    <th>完了ボタン</th>
                  </tr>
                </thead>
                <tbody>
                   <tr v-for="todo in todos" v-bind:key="todo.id">
                    <td>@{{ todo.id }}</td>
                    <td>@{{ todo.title }}</td>   
                    <td><button class="btn btn-primary">完了</button>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="col-xs-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="タスクを入力してください">
                <span class="input-group-btn">
                  <button class="btn btn-success" type="button">タスクを登録
              </button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="{{ asset('js/app.js') }}"></script> <!-- app.jsの読込 -->
    </body>
</html>


<JS>
■ C:\xampp\htdocs\laravel-vue-todo\resources\assets\js
app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

//Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app',
    data: {
        todos:[]
  },
  methods: {
    fetchTodos: function(){ //←axios.getでTODOリストを取得しています
       axios.get('/api/get').then((res)=>{
          app.todos = res.data
      })
    }
  },
  created() {  //←インスタンス生成時にfetchTodos()を実行したいので、createdフックに登録します。
    this.fetchTodos()
  },
});

5. 試したこと 

① app.jsの変更

const app = new Vue({
    el: '#app',
    data: function() {
    return {   ←returnをつけてtodosを格納
        todos:[]
    };
  },
  methods: {
    fetchTodos: function(){ //←axios.getでTODOリストを取得しています
       axios.get('api/get').then((res)=>{ ←/api/getからapi/getに変更
          app.todos = res.data
      })
    }
  },
  created() {  //←インスタンス生成時にfetchTodos()を実行したいので、createdフックに登録します。
    this.fetchTodos()
  },
});

② welcom.blade.phpの <tr v-for="todo in todos" v-bind:key="todo.id">部分の変更

     <tr v-for="(todo,todo.id) in todos" v-bind:key="todo.id">
                    <td>@{{ todo.id }}</td>
                    <td>@{{ todo.title }}</td>   
                    <td><button class="btn btn-primary">完了</button>
                  </tr>


→ いずれのやり方でも画面が真っ白のままになります。

4. 補足情報(FW/ツールのバージョンなど)

■ 使用OS:Windows 10 PRO
■ XAMPP Version: 7.2.5
■ phpversion:7.1
■ Laravelversion:5.5
■ Vue.js:2.5.7
■ axios: 0.17

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

すいません。自己解決致しましたので解決方法を記載致します。
具体的には「Laravelとvueの連携!データベース内の一覧を表示する方法」を参考に作成致しました。
参考URL:https://blog.capilano-fw.com/?p=432

1.POINT

● middleware Group~についてはapi.phpに記述
● vue.jsファイルとaxios.jsファイルをblade内に埋め込む
● vue.jsでの具体的な処理をblade内の<script>~</script>内に記述
● axiosのURLパスはapiでjsonが表示されたURLを記載
下記例の場合:http://localhost/laravel-vue-todo/public/api/getなので「/laravel-vue-todo/public/api/get」です。

2.具体的な手順

(1) web.phpとapi.phpファイルの編集
■ C:\xampp\htdocs\laravel-vue-todo\routes
web.php

<?php

Route::get('/{app}', function () {  //←app以外のものは全て飛ばすようにする
  return view('welcome');
})->where('app', '.*');

//←以前書いたRoute::Group~を削除


■ C:\xampp\htdocs\laravel-vue-todo\routes
api.php

<?php

use Illuminate\Http\Request;

Route::group(['middleware' => 'api'], function() {
  Route::get('get',  'TodoController@getTodos'); //←表示用メソッド
});


※表示用メソッドはweb.phpではなくapi.php側に記載をする
Todocontroller

(2) http://localhost/laravel-vue-todo/public/api/getでjsonが取得出来ているか確認
下記のようなjsonが表示されていればOKみたいです。
イメージ説明

(3) app.jsを編集

require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({
  el: '#app'
});
//←以前に書いてあった処理は全て削除


Todo.php,TodoControllerはそのままでOK

(4) welcome.blade.phpの編集

<!doctype html>
  <html lang="{{ app()->getLocale() }}">
    <head>
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
       <!-- Fonts -->
       <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="{{ asset('css/app.css') }}">
      <title>Laravel-Vue-todo</title>
    </head>
    <body>
      <div id="app">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <br>
            </div>
            <div class="col-xs-6">
              <table class="table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>タスク名</th>
                    <th>完了ボタン</th>
                  </tr>
                 </thead>
                 <tbody>
                  <tr v-for="todo in todos" v-bind:key="todo.id">  <!-- ←v-forを使ってtodosを表示 -->
                    <td>@{{ todo.id }}</td>  <!-- ←todoのIDを表示。@を忘れず! -->
                    <td>@{{ todo.title }}</td>  <!-- ←todoのtitleを表示。@を忘れず! -->
                    <td><button class="btn btn-primary" v-on:click="deleteTodo(todo.id)">完了</button></td> <!-- ←todo.idを引数にdeleteメソッドを実行-->
                 </tr>  
                </tbody>
              </table>
            </div>
            <div class="col-xs-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="タスクを入力してください" v-model="new_todo"> <!-- ←v-modelを追記 -->
                <span class="input-group-btn">
                  <button class="btn btn-success" type="button" v-on:click="addTodo">タスクを登録する</button> <!-- ←v-on:clickを追記 -->
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
       <script>
            new Vue({ 
                el: '#app',
                data: {  //←api.jsの処理を全てここに記述
                   todos: [] //←TODOを格納するための配列を用意
                  },
                methods: {
                   fetchTodos: function(){ //←axios.getでTODOリストを取得しています
                   axios.get('/laravel-vue-todo/public/api/get').then((res)=>{
                      this.todos = res.data //←取得したTODOリストをtodosに格納
                   });
                 }
                },
               created() {  //←インスタンス生成時にfetchTodos()を実行したいので、createdフックに登録します。
                  this.fetchTodos()
               },
                mounted() {
                 var url = '/laravel-vue-todo/public/api/get';
                 axios.get(url).then(function(response){
                    var todos = response.data;
                    console.log(todos);
                    self.todos = response.data;
                });
              }
            });
        </script>
    </body>
</html>


(5) http://localhost/laravel-vue-todo/public/で画面確認
下記画面のようになっていれば大丈夫です。
イメージ説明

表示だけですが、解決することが出来ました。。
今回はtemplateでのaixos検証をしていないので次回以降確認してみたいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

ソースコードだけ貼られても回答する事が難しいと思いますので
(回答するには同じ環境を作らないといけないので)

まずはデバッグの方法を勉強しましょう。

Laravel内で期待通りの値を用意できているか

  • できていないなら当然それ以降の処理に影響する、axiosやVueをいくらいじっても解決しない
  • dd を使いLaravel内のデータを確認しましょう
  • ChromeDeveloperToolでレスポンス内容を確認しましょう

Vueに期待通りの値を用意できているか

  • 用意できているならVueの問題、Laravelやaxiosをいじっても解決しない
  • まずは固定の値を使って思い通りの表示ができるか確認しましょう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る