Skip to content

Instantly share code, notes, and snippets.

@paulredmond
Last active April 20, 2020 16:04
Show Gist options
  • Save paulredmond/a1f1adeffd18d8834d60ced4f4d7f657 to your computer and use it in GitHub Desktop.
Save paulredmond/a1f1adeffd18d8834d60ced4f4d7f657 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

need part 4

@OzanKurt
Copy link

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

@opi-dopi
Copy link

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

@seebaermichi
Copy link

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.

@sdwru
Copy link

sdwru commented Apr 20, 2020

Thanks for the tutorial. I am learning a lot. One thing I found confusing going from part 2 to part 3 is that you originally had a method called fetchData() in part 2 and the first half of part 3. Halfway through part 3 it vanishes without a trace with no mention why, presumably replaced by const getUsers. Perhaps that disappearing method should be called getUsers() for consistency.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment