List.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <div class="header-comments">
  3. <div class="header-comments__wrapper">
  4. <h2 class="header-comments__title">Комментарии в&nbsp;эфире</h2>
  5. <v-skeleton-loader v-if="!lastCommentsList.comments"
  6. class="mx-auto"
  7. max-width="auto"
  8. type="paragraph,sentences@2"
  9. ></v-skeleton-loader>
  10. <ul v-if="lastCommentsList.comments" class="header-comments__list">
  11. <HeaderCommentsItem
  12. v-for="comment in lastCommentsList.comments"
  13. :key="comment.id"
  14. :comment="comment"
  15. />
  16. </ul>
  17. </div>
  18. </div>
  19. </template>
  20. <script>
  21. import { mapGetters, mapActions } from "vuex";
  22. export default {
  23. mounted() {
  24. this.getLastCommentsList();
  25. setInterval(this.getLastCommentsList, 60000);
  26. },
  27. computed: {
  28. ...mapGetters({
  29. lastCommentsList: "modules/comments/lastCommentsList",
  30. }),
  31. },
  32. methods: {
  33. ...mapActions({
  34. getLastCommentsList: "modules/comments/getLastCommentsList",
  35. }),
  36. },
  37. };
  38. </script>
  39. <style>
  40. </style>