Spiral's avatar

Pagination not working in vue js

i'm using vuejs plugin pagination for paginate the list but getting error You can see this Cannot read property "first name" undefined

my vue js code is

<table v-if="type=='list'" class="table table-bordered table-hover">
   <thead>
   <tr>
       <th>Title</th>
       <th>User</th>
       <th>Birth Date</th>
   </tr>
   </thead>
   <tbody>
   <tr v-for="(job,key) in jobs">
       <td>{{ job.title }}</td>
       <td>{{ job.user.first_name }} {{ job.user.last_name }}</td>   
       <td>{{ job.birt_date | formatDate }}</td>
   </tr>
   </tbody>
</table>
<pagination :data="jobs" :limit="1" @pagination-change-page="getResults"></pagination>


<script>
  Vue.component('pagination', require('laravel-vue-pagination'));
  export default {
        mounted() {
          this.getResults()
        },        
        data(){
            return{
              csrfToken : Laravel.csrfToken,
              title: '',
              birt_date: '',
              jobs:[],
            }
        },
        methods: {
          getResults(page = 1) {               
                let _this = this;
                axios.get('/admin/jobs/create', {
                      params: {
                          page: page,
                      }
                  })
                    .then(response => {
                        _this.jobs = response.data.jobs;
                    })
                    .catch(response => {
                        this.errors = response.errors;
                        console.log(response);
                    });
            }
        }
</script>

laravel code is

$jobs = Job::with('user')->paginate(5);
        return response()->json([
            'success' => true,
            'jobs' => $jobs
        ]);
0 likes
5 replies
Sergiu17's avatar

This means that there's a job without user.

user console.log for response.data.jobs and see if every single job has an user

1 like
Spiral's avatar

Thanks @sergiu17 brother for replying..

I have an object user in the jobs but when put pagination then get this error which is attach with the user object

Can you give me the solution when have object with in the object how can manage in vue js when put pagination

Sergiu17's avatar

@spiral with an if statement would be simplest solution

<td v-if="job.user">{{ job.user.first_name }} {{ job.user.last_name }}</td>

show user's details of the job only if there's an user.

1 like
Spiral's avatar

@sergiu17 bro then getting this error Cannot read property 'title' of null

<tr v-for="(job,key) in jobs">
       <td>{{ job.title }}</td>
       <td v-if="job.user">{{ job.user.first_name }} {{ job.user.last_name }}</td>   
       <td>{{ job.birt_date | formatDate }}</td>
   </tr>
frankielee's avatar

There is a job that is null.

I suggest that filter the null jobs on the backend or apply something like

<div v-if="job">// to filter the null job
     <td>{{ job.title }}</td>
       <td>{{ job.user.first_name }} {{ job.user.last_name }}</td>   
       <td>{{ job.birt_date | formatDate }}</td>
</div>

Please or to participate in this conversation.