在Laravel + Vue中加载页面时显示所有数据

Question

目前我正在学习与laravel的vue。我正在制作简单的待办事项。我在welcome.blade.php做所有的事情。我很高兴存放待办事项，但我无法查看所有待办事项。这是我尝试过的

welcome.blade.php

 <div class="card-body">
       <div class="col-md-12">
           <div class="form-group">
                <input type="submit" @click.prevent="createTodo()" value="Create">
                <input type="text" class="form-control col-md-10" v-model="todo.taskName">
            </div>
       </div>
       <hr>
       <div class="content">
             @{{ todo }}
       </div>
</div>

代码视图

const app = new Vue({
    el: '#todo',
    data: {
        todo: {
            taskName: ''
        }
    },
    methods: {
        createTodo: function createTodo() {
            var _this = this;
            var input = this.todo;
            axios.post('/create-todo', input).then(function (response) {
                _this.todo = {'taskName': ''};
                _this.getVueItems();
            });
        },
        getData: function getData(){
            axios.get('/').then(function (response) {
                this.todo = response.data;
            })
        }
    },
    mounted: function () {
        this.getData();
    }
});

web.php

Route::get('/', function () {
    return view('welcome');
});

Route::post('create-todo', 'TodoController@store');

我混淆了如何返回数据。因为/路线直接返回视图。

Answer 1

每当您使用VueJS时，您都在使用前端工具。这个前端工具将从“后端”部分获取数据。您需要返回数据而不是HTML（除非您有特定的理由这样做）

返回数据：

Route::get('/', function () {
    return Todo::all();
});

在Vue：

 axios.get('/').then(response => {
   this.todo = response.data;
 })

注意response => {...}。如果您不使用ECMA6表示法，this将引用函数本身而不是Vue实例。

由于您是初学者，我强烈建议您查看https://developers.google.com/web/tools/chrome-devtools/network/

本教程将帮助您了解（请参阅）返回的数据并了解“幕后”的内容

编辑

还要详细说明一下：你正在返回一个你必须循环的集合。否则你将显示json对象

Answer 2

尝试添加另一条路线，如：

 Route::get('get-todos', 'TodoController@index');

在你的vue：

 axios.get('/get-todos').then(function (response) {
            this.todo = response.data;
        })

你的控制器应该像：

       public function index(){
               return Todo::all();
        }

如果你想使用相同的网址，试试这个：

 Route::get('/', function (Request $request) {
          if($request->ajax()){
             return Todo::all(); 
          } else{
             return view('welcome');
           } 
  });