如何使用 laravel 中的 Vue axios 从数据库中获取数据？

Question

我需要使用 controller 中的查询从数据库中获取数据。

我在 vue 模板中有3 个 div 。

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

对于每个 div element ，值0应替换为查询中的 Count(*) 值。 查询应来自 2 个表表 A 和tables 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)）

1. 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);
    });
 }

2. 路线/web.php

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

如何编写 controller 代码以从 Query 中fetch the count(*)并将其绑定到div ？ 有人可以帮忙吗

谢谢

Answer 1

Vue 为这个任务提供了计算属性和观察者。

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

对于这些知识，现在您可以使用您的值创建一个数组并将它们循环到您的 div 中。 通过 axios 调用更改、添加、更新或删除它们，只需更改计算属性或更新观察程序。