Remove <noscript> tag that was causing HierarchyRequestError

Replaced it with a v-if logic to show or hide the element.
This commit is contained in:
Badri Sunderarajan 2020-03-15 09:42:46 +05:30
parent f9f0db645d
commit 0ae46197b6
2 changed files with 4 additions and 5 deletions

View file

@ -3,7 +3,7 @@ import DefaultLayout from '~/layouts/Default.vue'
import moment from "vue-moment"
import InfiniteLoading from "vue-infinite-loading"
export default Vue => {
export default (Vue, {router, head, isClient}) => {
Vue.component('Layout', DefaultLayout)
Vue.use(moment)
Vue.use(InfiniteLoading)

View file

@ -37,10 +37,7 @@
</div>
</infinite-loading>
</ClientOnly>
<Pager v-if="!loadedPosts" :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
<noscript>
<Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</noscript>
<Pager v-if="!infiniteLoadingActivated" :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</div>
</main>
</Layout>
@ -114,10 +111,12 @@
},
created() {
this.loadedPosts.push(...this.$page.posts.edges)
this.infiniteLoadingActivated = false
},
methods: {
async infiniteHandler($state) {
console.log('Fetching infinite.')
this.infiniteLoadingActivated = true
if (this.currentPage + 1 > this.$page.posts.pageInfo.totalPages) {
console.log('State complete.')
$state.complete()