Last active
April 20, 2020 16:04
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
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
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 thethis.router.push()
in thegoToNext()
method intentionally? If yes, why?Thanks again, for sharing your knowledge. Looking forward to part 4.