Base.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <div id="Base">
  3. <div class="loading" v-if="!items.length">
  4. <span>Loading ...</span>
  5. </div>
  6. <div class="cards-list" v-else>
  7. <aside class="search-info">
  8. {{ searchinfos }}
  9. </aside>
  10. <ul>
  11. <li v-for="item in items" v-bind:key="item.uuid">
  12. <Card :item="item"/>
  13. </li>
  14. </ul>
  15. <infinite-loading
  16. v-if="count > limit"
  17. @infinite="nextPage"
  18. >
  19. <div slot="no-more">No more results</div>
  20. </infinite-loading>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. import Card from 'vuejs/components/Content/Card'
  26. import { mapState, mapActions } from 'vuex'
  27. export default {
  28. name: "Base",
  29. data() {
  30. return {
  31. pagetitle:"Base",
  32. // searchinfos: null
  33. }
  34. },
  35. computed: {
  36. ...mapState({
  37. items: state => state.Search.items,
  38. searchinfos: state => state.Search.infos,
  39. count: state => state.Search.count,
  40. limit: state => state.Search.limit
  41. })
  42. },
  43. methods: {
  44. ...mapActions({
  45. newSearch: 'Search/newSearch',
  46. nextPage: 'Search/nextPage'
  47. }),
  48. // infiniteHandler($state){
  49. // console.log('inifiniteHandler', $state);
  50. // this.nextPage()
  51. // }
  52. },
  53. created() {
  54. // at first page load or first route entering launch a search if params exists in url query
  55. console.log('Base created() location',window.location);
  56. let params = new URLSearchParams(window.location.search)
  57. if(params.has('keys') || params.has('term')){
  58. this.$store.commit('Search/setKeys', params.get('keys'))
  59. this.$store.commit('Search/setTerm', params.get('term'))
  60. this.pagetitle = params.get('keys')
  61. this.newSearch()
  62. }
  63. },
  64. beforeRouteUpdate (to, from, next) {
  65. // when query change launch a new search
  66. console.log('Base beforeRouteUpdate', to, from, next);
  67. this.$store.commit('Search/setKeys', to.query.keys)
  68. this.$store.commit('Search/setTerm', to.query.term)
  69. this.pagetitle = to.query.keys
  70. this.newSearch()
  71. next()
  72. },
  73. components: {
  74. Card
  75. }
  76. }
  77. </script>
  78. <style lang="scss" scoped>
  79. </style>