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 ```php 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 ```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 <?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
<?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
1<?php
2
3/*
4|--------------------------------------------------------------------------
5| Web Routes
6|--------------------------------------------------------------------------
7|
8| Here is where you can register web routes for your application. These
9| routes are loaded by the RouteServiceProvider within a group which
10| contains the "web" middleware group. Now create something great!
11|
12*/
13
14//Route::get('/', function () { //←今回は使用しないのでコメントアウト
15    // return view('welcome');
16//});
17
18Route::get('/{app}', function () {  //←追記
19  return view('welcome');
20})->where('app', '.*'); 
21
22Route::group(['middleware' => 'api'], function() {
23  Route::get('get',  'TodoController@getTodos');
24});

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

html
1<!doctype html>
2  <html lang="{{ app()->getLocale() }}">
3    <head>
4      <meta charset="utf-8">
5      <meta name="csrf-token" content="{{ csrf_token() }}">  <!-- CSRF対策 -->
6      <meta http-equiv="X-UA-Compatible" content="IE=edge">
7      <meta name="viewport" content="width=device-width, initial-scale=1">
8      <link rel="stylesheet" href="{{ asset('css/app.css') }}">  <!-- Laravelアセットパス追加 -->
9      <title>Laravel-Vue-todo</title>
10    </head>
11    <body>
12      <div id="app"> 
13        <div class="container">
14          <div class="row">
15            <div class="col-xs-12">
16              <br>
17            </div>
18            <div class="col-xs-6">
19              <table class="table">
20                <thead>
21                  <tr>
22                    <th>ID</th>
23                    <th>タスク名</th>
24                    <th>完了ボタン</th>
25                  </tr>
26                </thead>
27                <tbody>
28                   <tr v-for="todo in todos" v-bind:key="todo.id">
29                    <td>@{{ todo.id }}</td>
30                    <td>@{{ todo.title }}</td>   
31                    <td><button class="btn btn-primary">完了</button>
32                  </tr>
33                </tbody>
34              </table>
35            </div>
36            <div class="col-xs-6">
37              <div class="input-group">
38                <input type="text" class="form-control" placeholder="タスクを入力してください">
39                <span class="input-group-btn">
40                  <button class="btn btn-success" type="button">タスクを登録
41              </button>
42                </span>
43              </div>
44            </div>
45          </div>
46        </div>
47      </div>
48      <script src="{{ asset('js/app.js') }}"></script> <!-- app.jsの読込 -->
49    </body>
50</html>

<JS> ■ C:\xampp\htdocs\laravel-vue-todo\resources\assets\js app.js ```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の変更
```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">部分の変更

html
1     <tr v-for="(todo,todo.id) in todos" v-bind:key="todo.id">
2                    <td>@{{ todo.id }}</td>
3                    <td>@{{ todo.title }}</td>   
4                    <td><button class="btn btn-primary">完了</button>
5                  </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

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

回答2件

自己解決

すいません。自己解決致しましたので解決方法を記載致します。
具体的には「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
1<?php
2
3Route::get('/{app}', function () {  //←app以外のものは全て飛ばすようにする
4  return view('welcome');
5})->where('app', '.*');
6
7//←以前書いたRoute::Group～を削除

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

php
1<?php
2
3use Illuminate\Http\Request;
4
5Route::group(['middleware' => 'api'], function() {
6  Route::get('get',  'TodoController@getTodos'); //←表示用メソッド
7});

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

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

(3) app.jsを編集

Javascript
1
2require('./bootstrap');
3
4window.Vue = require('vue');
5
6const app = new Vue({
7  el: '#app'
8});
9//←以前に書いてあった処理は全て削除

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

(4) welcome.blade.phpの編集

html
1<!doctype html>
2  <html lang="{{ app()->getLocale() }}">
3    <head>
4      <meta charset="utf-8">
5      <meta name="csrf-token" content="{{ csrf_token() }}">
6      <meta http-equiv="X-UA-Compatible" content="IE=edge">
7      <meta name="viewport" content="width=device-width, initial-scale=1">
8       <!-- Fonts -->
9       <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
10      <link rel="stylesheet" href="{{ asset('css/app.css') }}">
11      <title>Laravel-Vue-todo</title>
12    </head>
13    <body>
14      <div id="app">
15        <div class="container">
16          <div class="row">
17            <div class="col-xs-12">
18              <br>
19            </div>
20            <div class="col-xs-6">
21              <table class="table">
22                <thead>
23                  <tr>
24                    <th>ID</th>
25                    <th>タスク名</th>
26                    <th>完了ボタン</th>
27                  </tr>
28                 </thead>
29                 <tbody>
30                  <tr v-for="todo in todos" v-bind:key="todo.id">  <!-- ←v-forを使ってtodosを表示 -->
31                    <td>@{{ todo.id }}</td>  <!-- ←todoのIDを表示。@を忘れず！ -->
32                    <td>@{{ todo.title }}</td>  <!-- ←todoのtitleを表示。@を忘れず！ -->
33                    <td><button class="btn btn-primary" v-on:click="deleteTodo(todo.id)">完了</button></td> <!-- ←todo.idを引数にdeleteメソッドを実行-->
34                 </tr>  
35                </tbody>
36              </table>
37            </div>
38            <div class="col-xs-6">
39              <div class="input-group">
40                <input type="text" class="form-control" placeholder="タスクを入力してください" v-model="new_todo"> <!-- ←v-modelを追記 -->
41                <span class="input-group-btn">
42                  <button class="btn btn-success" type="button" v-on:click="addTodo">タスクを登録する</button> <!-- ←v-on:clickを追記 -->
43                </span>
44              </div>
45            </div>
46          </div>
47        </div>
48      </div>
49      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>  
50      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
51       <script>
52            new Vue({　
53                el: '#app',
54                data: {　　//←api.jsの処理を全てここに記述
55                   todos: [] //←TODOを格納するための配列を用意
56                  },
57                methods: {
58                   fetchTodos: function(){ //←axios.getでTODOリストを取得しています
59                   axios.get('/laravel-vue-todo/public/api/get').then((res)=>{
60                      this.todos = res.data //←取得したTODOリストをtodosに格納
61                   });
62                 }
63                },
64               created() {  //←インスタンス生成時にfetchTodos()を実行したいので、createdフックに登録します。
65                  this.fetchTodos()
66               },
67                mounted() {
68                 var url = '/laravel-vue-todo/public/api/get';
69                 axios.get(url).then(function(response){
70                    var todos = response.data;
71                    console.log(todos);
72                    self.todos = response.data;
73                });
74              }
75            });
76        </script>
77    </body>
78</html>