####TodoController public function getTodos(){ $todos = Todo::all(); return $todos; } public function addTodo(Request $request){ $todo = new Todo; $todo->title = $request->title; $todo->save(); $todos = Todo::all(); return $todos; } public function deleteTodo(Request $request){ $todo = Todo::where('id', $request->id)->delete(); $todos = Todo::all(); return $todos; } ###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"> link rel="stylesheet" href="{{ asset('css/app.css') }}"> title>Laravel-Vue-todo /head> body> div id="app"> div class="container"> div class="row"> div class="col-xs-6"> table class="table"> 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" v-on:click="deleteTodo(todo.id)">完了/button>/td> /tr> /table> /div> div class="col-xs-6"> div class="input-group"> input type="text" class="form-control" placeholder="タスクを入力してください" v-model="new_todo"> span class="input-group-btn"> button class="btn btn-success" type="button" v-on:click="addTodo">タスクを登録する/button> /span> script src="{{ asset('js/app.js') }}">/script> !-- ←④ --> /body> /html> ########assets/js/app.js require('./bootstrap'); window.Vue = require('vue'); Vue.component('example-component', require('./components/ExampleComponent.vue')); const app = new Vue({ el: '#app', data: { todos: [] //←TODO を格納するための配列を用意 }, methods: { fetchTodos: function(){ //←axios.get で TODO リストを取得しています axios.get('/api/get').then((res)=>{ this.todos = res.data //← 取得した TODO リストを todos に格納 }) }, addTodo: function(){ axios.post('/api/add',{ title: this.new_todo }).then((res)=>{ this.todos = res.data this.new_todo = '' }) }, deleteTodo: function(task_id){ axios.post('/api/del',{ id: task_id }).then((res)=>{ this.todos = res.data }) } }, created() { //← インスタンス生成時に fetchTodos()を実行したいので、created フックに登録します。 this.fetchTodos() }, }); ########routes/api.php Route::group(['middleware' => 'api'], function() { Route::get('get', 'TodoController@getTodos'); Route::post('add', 'TodoController@addTodo'); Route::post('del', 'TodoController@deleteTodo'); }); #########routes/web.php Route::get('/{app}', function () { //←追記 return view('welcome'); })->where('app', '.*');