Q&A
Internet Explorer 11 です。
Google Chome でもやりましたが、こちらは、画面にjsonコードが表示されます。
URLは、http://localhost/test/public/api/get としてます。
http://localhost/test/public/ でやると、welcame 画面が素の状態で開きます。（jsonコード出力のContollorer(getTodos)処理が起動しない）
Laravel5.8+Vue.js+axios でSPAをはじめて試していますが、うまくいきません。
ご教授お願いいたします。
・参考としたURL
https://qiita.com/zaburo/items/603f422ed78c15c47a2a
【現象]
http://････/api/get とすると、「get.jsonを開くか、または保存しますか」となり、応答のjsonを画面に反映することができません。
【コード】
[/routes/web.php]
Route::get('/{any}', function () {
return view('welcome');
})->where('any','.*');
[/routes/app.php]
Route::group(['middleware' => 'api'], function () {
Route::get('get', 'TodoController@getTodos');
});
[Controllers]
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Todo;
class TodoController extends Controller
{
public function getTodos()
{
$todos = Todo::all();
return $todos;
}
}
[\views\welcome.blade.php]
<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, shrink-to-fit=no"> <link rel="stylesheet" href="{{ asset('/css/app.css') }}"> </head> <body> <div id="app"> <div class="container"> <h3 class="mt-5">Todo 管理システム</h3> <div class="form-group mt-4"> <label for="todo">新規Todo</label> <input type="text" class="form-control" id="todo" v-model="new_todo"> </div> <button type="submit" class="btn btn-primary" v-on:click="addTodo">登録</button> <table class="table mt-5"> <thead> <th>ID</th><th>タスク</th><th>完了</th> </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-secondary" v-on:click="deleteTodo(todo.id)">完了</button></td> </tr> </tbody> </table> </div> </div> </body>[\resources\app.js]
import Vue from 'vue';
import axios from 'axios';
require('./bootstrap');
window.Vue = require('vue');
Vue.prototype.$axios = axios;
const app = new Vue({
el:'#app',
data:{
todos:[],
new_todo: ''
},
methods: {
fetchTodos: function(){
axios.get('/api/get').then((res)=>{
this.todos = res.data
});
},
created(){
this.fetchTodos();
}
});
回答2件
0
自己解決
以下の方法で解決しました。
app.js
（旧）
axios.get('/api/get').then((res)=>{
this.todos = res.data
（変更後）
axios.get('api/get').then((res)=>{
app.todos = res.data
お騒がせしました。ありがとうございました。
投稿2019/03/16 07:44
総合スコア11
0
使ってるブラウザはなんでしょう。
jsonを表示する時にそういう動作になるのは単にそのブラウザの仕様。
ブラウザで開くのは/api/getではなくhttp://.../
投稿2019/03/09 01:51
総合スコア10377
補足です。Google Chome の場合は、welcame 画面ではなく、何もない画面に、Jsonコードのベタ表示です。
app.jsの
axios.get('/api/get').then((res)=>{
を、
axios.get('api/get').then((res)=>{
とすると
http://localhost/test/public/
で、json の応答が返ってきたようです。
しかし、まだ画面表示できません。
平日は、あまり時間がとれないので、次の土日に引き続き調べてみます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。