如何使用 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 調用更改、添加、更新或刪除它們，只需更改計算屬性或更新觀察程序。