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

Posted 2023-02-22

【中文标题】在 Laravel + Vue 中页面加载时显示所有数据

【英文标题】：Show all data when page loads in Laravel + Vue

【发布时间】：2019-08-27 15:41:59

【问题描述】：

目前我正在使用 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');

我对如何返回数据感到困惑。因为/路由直接返回视图。

【参考方案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 对象

【讨论】：

谢谢，但它直接显示所有数据。它不显示html内容

@MaulikShah 这正是预期的行为。 VueJS (axios) 应该得到 data 而不是 HTML 内容

但我也想表明格式良好的数据在 html 标签中的含义

【参考方案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');
            
  );

【讨论】：

谢谢。我想过，但我想用相同的 URL 在同一页面上显示该数据。这可能吗？？

您还应该在web.php 文件的顶部添加use Illuminate\Http\Request; 和use App\Todo;

尝试用(response)=>替换function (response) 以避免一些问题

谢谢，它有效。但它适用于这个mounted: function () axios.get('/').then((response) => this.todo = response.data; console.log(this.todo) ) 而不是这个mounted: function () this.getData(); 为什么？你能解释一下吗

啊是的，错误在这里getData: function getData() .. 应该像getData: function() ... 或getData() ...，`createTodo` 也是一样

【参考方案3】：

后端需要传递数据，前端需要获取数据。

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

在 Vue：

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