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 moment from "vue-moment"
import InfiniteLoading from "vue-infinite-loading" import InfiniteLoading from "vue-infinite-loading"
export default Vue => { export default (Vue, {router, head, isClient}) => {
Vue.component('Layout', DefaultLayout) Vue.component('Layout', DefaultLayout)
Vue.use(moment) Vue.use(moment)
Vue.use(InfiniteLoading) Vue.use(InfiniteLoading)

View file

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