FollowButton.vue 997 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <div>
  3. <button class="btn btn-primary ml-4" @click="followUser" v-text="ButtonText"></button>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props: ['userId', 'follows'],
  9. mounted() {
  10. console.log('Component mounted.')
  11. },
  12. data: function () {
  13. return {
  14. status: this.follows,
  15. }
  16. },
  17. methods: {
  18. followUser() {
  19. axios.post('/follow/' + this.userId)
  20. .then(response => {
  21. this.status = ! this.status;
  22. })
  23. .catch(errors => {
  24. if (errors.response.status == 401) {
  25. window.location = '/login';
  26. }
  27. });
  28. }
  29. },
  30. computed: {
  31. ButtonText () {
  32. return (this.status) ? 'Unfollow' : 'Follow';
  33. }
  34. }
  35. }
  36. </script>