Users.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div id="users">
  3. <md-card>
  4. <md-card-header>
  5. <span class="md-title">Users</span>
  6. </md-card-header>
  7. <md-card-content>
  8. <md-table>
  9. <md-table-header>
  10. <md-table-row>
  11. <md-table-head>Username</md-table-head>
  12. <md-table-head>Email</md-table-head>
  13. </md-table-row>
  14. </md-table-header>
  15. <md-table-body>
  16. <md-table-row v-for="(user, index) in users" :key="user._id">
  17. <md-table-cell>
  18. <router-link :to="userLink(user._id)" class="md-raised md-primary">
  19. {{user.username}}
  20. </router-link>
  21. </md-table-cell>
  22. <md-table-cell>
  23. {{user.email}}
  24. </md-table-cell>
  25. </md-table-row>
  26. </md-table-body>
  27. </md-table>
  28. </md-card-content>
  29. </md-card>
  30. </div>
  31. </template>
  32. <script>
  33. export default {
  34. data () {
  35. return {
  36. users: []
  37. }
  38. },
  39. computed: {
  40. loggedInUser() {
  41. return this.$store.state.loggedInUser;
  42. }
  43. },
  44. beforeCreate: function() {
  45. this.usersUrl = this.$resource('users{/id}');
  46. },
  47. mounted: function() {
  48. this.getUsers();
  49. },
  50. methods: {
  51. userLink(id) {
  52. return '/user/' + id;
  53. },
  54. getUsers() {
  55. this.usersUrl.get().then((response) => {
  56. return response.json();
  57. }, (response) => {
  58. alert('getUsers: unable to get resource');
  59. }).then((data) => {
  60. this.users = data.users || [];
  61. });
  62. },
  63. deleteUser(userId) {
  64. this.usersUrl.update({id: userId}).then((response) => {
  65. return response.json();
  66. }, (response) => {
  67. alert('deleteUser: unable to get resource');
  68. }).then((data) => {
  69. });
  70. }
  71. }
  72. }
  73. </script>
  74. <style>
  75. #users {
  76. padding: 10px;
  77. }
  78. </style>