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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 byconst getUsers
. Perhaps that disappearing method should be called getUsers() for consistency.