如何在 laravel 中使用 Vue axios 从数据库中获取数据？答案

【问题标题】：How to fetch data from the DB using Vue axios in laravel?如何在 laravel 中使用 Vue axios 从数据库中获取数据？
【发布时间】：2021-07-22 13:56:37
【问题描述】：

我需要使用控制器中的 query 从 DB 中获取数据。

我在 vue 模板中有 3 个 div 的。

<div id="div1">0</div>
<div id="div2">0</div>
<div id="div3">0</div>

对于每个 div element，值 0 应替换为查询中的 Count(*) 值。查询应来自 2 tables 表 A 和表 B

SELECT count(*) FROM $tableA->project WHERE $tableB->question != null;

查询结果在 3 个表 ProjectA、ProjectB、ProjectC（$tableA->project = ProjectA、ProjectB、ProjectC）其中表 ProjectA、ProjectB、ProjectC 具有名为 1 ($tableB->question = 1 ) 的列包含 Values(like 1, 2,3) 而不是 EMPTY 值。所有非空值的总数应该是查询的结果。

例如，表项目 A 具有如下所示的列

项目 A

1 (COLUMN)
EMPTY
EMPTY
EMPTY
1
2
EMPTY

项目 B

1 (COLUMN)
EMPTY
EMPTY
EMPTY
1
2
EMPTY

每个 Div 中的 0 应替换为值的计数（在表中的 col 1 中，此处的总计数为 2(1,2)）

Vue 脚本

export default {

      data: function() {
            return {
              actualValue:'',
              query: ''
            }
        },
  mounted() {
      this.updateValue()
},
 updateValue: function() {

     axios.get('/api/updatedcount/',{
      query: this.query

     }).then((response) => {
               this.actualValue = response.data;
               console.log(this.actualValue);


               })
                .catch(function (error) {
           console.log(error);
    });
 }

Routes/web.php

 Route::get('/updatedcount', 'someController@someMethod');

如何从查询中将控制器代码写入fetch the count(*) 并将其绑定到div？有人可以帮忙吗

谢谢

【问题讨论】：

标签： php laravel vue.js

【解决方案1】：

Vue为此任务提供Computed Properties和Watchers。

然后您可以在一个 div 中使用 v-for 运算符，该运算符将使用您获得的值创建所有子 div（所有这些都为您计算），并且无论何时更改，vue 都会为您更改。

现在你可以用你的值创建一个数组并将它们循环到你的 div 中。通过 axios 调用更改、添加、更新或删除它们，只需更改计算属性或更新观察者。

【讨论】：