How to fetch data from the DB using Vue axios in laravel?

Question

I need to fetch the data from the DB using a query in the controller.

I have 3 div's in the vue template.

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

The value 0 should be replaced by Count(*) value from the query , for each div element . The query should be from 2 tables Table A and Table B

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

The Query results in the 3 Tables ProjectA , ProjectB , ProjectC ($tableA->project = ProjectA, ProjectB, ProjectC) Where the table ProjectA , ProjectB , ProjectC has a column named 1 ($tableB->question = 1 ) Which contains Values(like 1, 2,3) not the EMPTY values . The total count of all the Non-EMPTY Values should be the result of the Query.

For Ex,the Table Project A has the Column like the below

Project A

1 (COLUMN)
EMPTY
EMPTY
EMPTY
1
2
EMPTY

Project B

1 (COLUMN)
EMPTY
EMPTY
EMPTY
1
2
EMPTY

The 0 in the each Div's should be replaced by Count of the values(in the col 1 in the tables, Which is total count here is 2(1,2))

1. Vue script

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. Routes/web.php

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

How to Write controller code to fetch the count(*) from the Query and to bind it the div ? Could someone please help

Thanks

Answer 1

Vue provides Computed Properties and Watchers for this tasks.

Then you can use the v-for operator in one div that will create all sub-divs with the values you get (all counts for you) and whenever it changes vue will change it for you.

For this knowledge now you can make a array with your values and loop them in your divs. Change, add, update or delete them via axios calls just changing the computed property or update watcher.