Table to visualize data using laravel and vue.js

Question

I have been working on making a simple vue js and laravel data displaying web page it is meant to display all the data in a table but I have had no such luck in doing so I have already posted this question but the error has now changed so I am posting again. I am able to see all the json data when I go to the /api directory even the different pages I will need for pagination with all the page numbers is there but when I go to the console I get a Json Error:

Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON 
data
Resource URL: http://127.0.0.1:8000/js/app.js
Source Map URL: laravel-vue-pagination.common.js.map

Not sure what this means or if it has any relevance to the data not being showed on the table or is there something else. Also when I load up the code editor my vue extension says it cannot find the tsconfig.json or jsconfig.json in project file.

So, any help is much appreciated here is the code: Home.blade.php:

 @extends('layouts.app')
@section('content')
<div class="container" id="app">
<home-component></home-component>
</div>
@endsection

HomeComponent:

<template>
<div class="container">
<div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Home component</div>
                <ul>
                    <li v-for="post in laravelData.data" :key="post._id">{{ post.STATUS }}</li>
                </ul>

                <Pagination :data="laravelData" @pagination-change-page="getResults" />
            </div>
        </div>
    </div>
    </div>
    </template>

    <script>
    import LaravelVuePagination from 'shetabit-laravel-vue-pagination';

  export default{
   components: {
        'Pagination': LaravelVuePagination
  },
 data() {
  return {
    laravelData: {}
};
},

mounted(){
this.getResults();
},
methods:{
        getResults(page = 1) {
            axios.get('api/users?page=' + page)
                .then(response => {
                    this.laravelData = response.data;
                });
        }

},

}
</script>

api route:

Route::middleware('api')->group(function () {
Route::get('/home', [PostController::class, 'home']);
});

Web route:

Route::get('{any}', function () {return view('home');})->where('any', '.*');

PostController

public function home() {
    $posts = Post::paginate(4);

    return response()->json($posts);
}

Output when console logging response:

If you need the versions use Laravel:8.83 vue:"^2.6.12" laravel-vue-pagination:"^2.3.1"

i think the issue is on this line 'this.results=response.data' to be like this 'this.results=response.data.data' , because response has data default on axios — Saravana Sai
– Saravana Sai, Commented May 25, 2022 at 7:06
Yeah that is true but only when I am not using pagination with pagination this is the way it should be done here is the library reop for more info github.com/shetabit/laravel-vue-pagination and I need pagination as the data is otherwise to big — Anshul Raj
– Anshul Raj, Commented May 25, 2022 at 7:12
can share what is the output of this line in console .. 'this.results' after getting back from response — Saravana Sai
– Saravana Sai, Commented May 25, 2022 at 7:41
@SaravanaSai have a look at the post I have updated with the output of results — Anshul Raj
– Anshul Raj, Commented May 25, 2022 at 7:48
Also I have an error given by the extension saying that there is no tsconfig file which I believe is need for loading json data and could be causing the problem so any ideas what to do? — Anshul Raj
– Anshul Raj, Commented May 25, 2022 at 7:49

Atlas-Pio · Accepted Answer · 2022-05-25 08:57:56Z

1

Aright, I've just created a new project and everything was working so here's the steps which you can obviously ignore Laravel installation.

Composer create-project --prefer-dist laravel/laravel test(you can ignore)
Composer require laravel/ui(you can ignore)
php artisan ui vue(you can ignore)
npm install && npm install [email protected] (you can ignore, but make sure you install paginate)
npm update vue-loader (you can ignore)
Basic VUE setup in app.js as below : (you can ignore)


require('./bootstrap');

window.Vue = require('vue').default;


import App from "./components/ExampleComponent.vue";
const app = new Vue({
    el: '#app',
    render: h => h(App),
});

In Example-Component.vue : (don't forget to import your component in VUE component)

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <ul>
                        <li v-for="post in laravelData.data" :key="post.id">{{ post.fname }}</li>
                    </ul>

                    <Pagination :data="laravelData" @pagination-change-page="getResults" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LaravelVuePagination from 'shetabit-laravel-vue-pagination';
    export default {
        components: {
            'Pagination': LaravelVuePagination
        },
        data() {
            return {
                // Our data object that holds the Laravel paginator data
                laravelData: {},
            }
        },

        mounted() {
            // Fetch initial results
            this.getResults();
        },

        methods: {
            // Our method to GET results from a Laravel endpoint
            getResults(page = 1) {
                axios.get('api/users?page=' + page)
                    .then(response => {
                        this.laravelData = response.data;
                    });
            }
        }
    }
</script>

welcome.blade.app Add Element and script tag to view, (I haven't added CSS because i only wanted to test VUE app)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            <div id="app"></div>
        </div>
    </body>

    <script src="{{ mix('js/app.js') }}"></script>
</html>

api.php (You should call your API via controller which is the recommended way, I've done this using api.php directly to don't waste time and lines of codes and description in here.)

Route::get('users', function () {
    $users = \App\Models\Product::paginate(4);
    return response()->json($users);
});

So, you've already installed your Laravel project, if you're not sure about your paginate component, just remove It like below :

npm uninstall package-name-in-package.json

And install it as i said :

install [email protected]

I haven't installed the original paginate to make sure you get what you want base on what you've installed before, to make sure you don't end to creating a new project or etc.

Edit 02 : Github Link

edited May 25, 2022 at 8:57

answered May 25, 2022 at 8:29

Atlas-Pio

1,17314 silver badges30 bronze badges

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

7 Comments

Anshul Raj Over a year ago

Alright thank you I am going to try to delete and reinstall the package as you mentioned one question you are adding your paginate statement in the api.php while calling the Models file I am using a controller in between and calling paginate there should not change anything right?

Atlas-Pio Over a year ago

no, keep your controller and do your api call just like before. I've just done that to make it faster to get the result. you don't need to get your items in api.php as i did. you do the regular way and use controller.

Anshul Raj Over a year ago

So as you have mentioned I tried but I got an error something to do with the home.balde.php as it is showing all of that code can you add what is in your blade file so I can test my code with it also I will update the code in the main post with what I have done now for you to see

Atlas-Pio Over a year ago

@AnshulRaj Blade view and App.js part of answer, updated.

Anshul Raj Over a year ago

There is no call to the component in the blade file? sorry if this is a bad question but where are you calling the component

|

Saravana Sai · Accepted Answer · 2022-05-25 08:13:22Z

0

I This error is caused due to json you have returned from controller

you check out more at MDN docs

you can try this out by adding in you controller response of getting post

response(json_encode($posts));

And Also try this out


getResults(page=1){
    axios.get('/api/home?page='+page)
   .then(response=>{this.results=JSON.parse(response.data) 
 ,console.log(this.results)}) 
   .catch(error => console.log(error));
}

edited May 25, 2022 at 8:13

answered May 25, 2022 at 8:01

Saravana Sai

1139 bronze badges

9 Comments

Anshul Raj Over a year ago

Sorry man but I tried this and it does not work still no data I fixed the json error by downloading a new version of bootstrap but that does not seem like its enough

Saravana Sai Over a year ago

can you add that data object ....what acutally contains inside that ,sometimes this kind of issue comes from there tooo

Anshul Raj Over a year ago

Inside the data object is an array of length 4 containing all the data that needs to be displayed adding the picture soon

Anshul Raj Over a year ago

Have a look at the post

Saravana Sai Over a year ago

ok i have altered the answer ....plz check it out

|

Collectives™ on Stack Overflow

Table to visualize data using laravel and vue.js

2 Answers 2

7 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related