Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
UsersIndex component for use with vue-router - https://laravel-news.com/building-vue-spa-laravel-part-3
<template>
<div class="users">
<div v-if="error" class="error">
<p>{{ error }}</p>
</div>
<ul v-if="users">
<li v-for="{ id, name, email } in users">
<strong>Name:</strong> {{ name }},
<strong>Email:</strong> {{ email }}
</li>
</ul>
<div class="pagination">
<button :disabled="! prevPage" @click.prevent="goToPrev">Previous</button>
{{ paginatonCount }}
<button :disabled="! nextPage" @click.prevent="goToNext">Next</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
const getUsers = (page, callback) => {
const params = { page };
axios
.get('/api/users', { params })
.then(response => {
callback(null, response.data);
}).catch(error => {
callback(error, error.response.data);
});
};
export default {
data() {
return {
users: null,
meta: null,
links: {
first: null,
last: null,
next: null,
prev: null,
},
error: null,
};
},
computed: {
nextPage() {
if (! this.meta || this.meta.current_page === this.meta.last_page) {
return;
}
return this.meta.current_page + 1;
},
prevPage() {
if (! this.meta || this.meta.current_page === 1) {
return;
}
return this.meta.current_page - 1;
},
paginatonCount() {
if (! this.meta) {
return;
}
const { current_page, last_page } = this.meta;
return `${current_page} of ${last_page}`;
},
},
beforeRouteEnter (to, from, next) {
getUsers(to.query.page, (err, data) => {
next(vm => vm.setData(err, data));
});
},
// when route changes and this component is already rendered,
// the logic will be slightly different.
beforeRouteUpdate (to, from, next) {
this.users = this.links = this.meta = null
getUsers(to.query.page, (err, data) => {
this.setData(err, data);
next();
});
},
methods: {
goToNext() {
this.$router.push({
query: {
page: this.nextPage,
},
});
},
goToPrev() {
this.$router.push({
name: 'users.index',
query: {
page: this.prevPage,
}
});
},
setData(err, { data: users, links, meta }) {
if (err) {
this.error = err.toString();
} else {
this.users = users;
this.links = links;
this.meta = meta;
}
},
}
}
</script>
@jwoodcock8mc

This comment has been minimized.

Copy link

jwoodcock8mc commented Jul 23, 2018

Hi Paul, I've been following this tutorial, and have reached the end of part 3. Is there a part 4 yet ? It doesn't appear to be linked from the part 3 page. Many thanks !

@guoxiangke

This comment has been minimized.

Copy link

guoxiangke commented Aug 24, 2018

need part 4

@OzanKurt

This comment has been minimized.

Copy link

OzanKurt commented Aug 25, 2018

Does it work? By me the users is undefined. @paulredmond

@opi-dopi

This comment has been minimized.

Copy link

opi-dopi commented Nov 11, 2018

Hi Paul, I've following for this tutorial. You are cool
We waiting for 4 part

@seebaermichi

This comment has been minimized.

Copy link

seebaermichi commented Jan 6, 2019

Hi Paul, thanks for this great tutorial. Just finished part 3.
I think I found a typo. You use paginatonCount, seems like there is an "i" missing.
And I have one question. Did you leave the name property in the object for the this.router.push() in the goToNext() method intentionally? If yes, why?
Thanks again, for sharing your knowledge. Looking forward to part 4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.