Show all data when page loads in Laravel + Vue

Question

Currently I'm Learning vue with laravel. I am making simple todo site. I am doing all stuff in welcome.blade.php. I am abel to store todos, but I am not able to view all todos. Here is, what i tried

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 code

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');

I confused that how to return data. Because / route directly returns view.

Bruno Francisco · Accepted Answer · 2019-04-05 17:20:46Z

1

Whenever you use VueJS you are using a front-end tool. This front-end tool will get the data from a "backend" part. You need to return data and not the HTML (unless you have a specific reason to do so)

Returning the data:

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

At Vue:

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

Note the response => {...}. If you don't use ECMA6 notation this will refer to the function itself and not to the instance of Vue.

Since you are a beginner I highly advise you to check this out https://developers.google.com/web/tools/chrome-devtools/network/

This tutorial will help you understand (see) the data returned and understand what is going on "under the hood"

EDIT

Also elaborating a little bit more: you are returning a collection which you will have to loop through. Otherwise you will be showing the json object

answered Apr 5, 2019 at 17:20

Bruno Francisco

4,2426 gold badges37 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Maulik Shah Over a year ago

thanks, but it directly shows all data. It does not show html content

Bruno Francisco Over a year ago

@MaulikShah that's exactly the behaviour expected. VueJS (axios) is expected to get data and not HTML content

Maulik Shah Over a year ago

but I also want to show that data in well format means in html tags

Boussadjra Brahim · Accepted Answer · 2019-04-05 17:24:51Z

1

Try to add another route like :

 Route::get('get-todos', 'TodoController@index');

and in your vue :

 axios.get('/get-todos').then(function (response) {
            this.todo = response.data;
        })

your controller should be like :

       public function index(){
               return Todo::all();
        }

if you want to use the same url try this :

 Route::get('/', function (Request $request) {
          if($request->ajax()){
             return Todo::all(); 
          } else{
             return view('welcome');
           } 
  });

edited Apr 5, 2019 at 17:24

answered Apr 5, 2019 at 17:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

6 Comments

Maulik Shah Over a year ago

thanks.I thought about that, but i want show that data on same page with same URL. Is that possible??

Boussadjra Brahim Over a year ago

you should also add use Illuminate\Http\Request; and use App\Todo; in the top of your web.php file

Boussadjra Brahim Over a year ago

try to replace function (response) by (response)=> to avoid some issues

Maulik Shah Over a year ago

thank you, it works. but it works with this

mounted: function () {         axios.get('/').then((response) => {             this.todo = response.data;             console.log(this.todo)         })     }

not with this mounted: function () { this.getData(); } why?? could you please explain

Boussadjra Brahim Over a year ago

ah yes, the error is here getData: function getData(){ .. it should be like getData: function(){ ... or getData(){ ..., the same thing for ` createTodo`

|

user14669259 · Accepted Answer · 2020-11-19 13:54:40Z

0

From backend you need to pass data and in front you need to fetch data.

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

At Vue:

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

answered Nov 19, 2020 at 13:54

user14669259

Collectives™ on Stack Overflow

Show all data when page loads in Laravel + Vue

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related