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>

vue代码

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

尝试添加其他路线，例如：

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

和您的观点：

 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');
           } 
  });

Answer 2

每当您使用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 3

您需要从后端传递数据，而在前端则需要获取数据。

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

在Vue：

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

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

3 个答案: