keep-alive influence @egjs/vue-infinitegrid

Description

Excuse me, but I’d like to ask how to restore scroll position with keepAlive?

Steps to check or reproduce

my codes like this: router:

{
   path: '/a',
   name: 'a,
   props: true,
   meta: {
     title: 'a-Page',
     keepAlive: true,
   },
   component: () => import('@/.../a'),
},
...
export default new Router({
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition && to.meta.keepAlive) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          window.scrollTo({
            top: savedPosition.y,
            left: 0,
          });
        }, 0);
      });
    }
  },
});

app.vue

<template>
  <div id="app" class="wrap">
    <keep-alive max="1">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

a.vue

<template>
   <masonry-infinite-grid
        ref="ig"
        id="masonry"
        class="container"
        v-bind:gap="-1"
        v-on:request-append="onRequestAppend"
    >
        <div 
            class="list_item" 
            v-for="(item, index) in items" 
            :key="index"
            :data-grid-groupkey="item.groupKey"
        >
        egjs {{ item.key }}
        <a href="/b/id">
            <img
                width="200"
                height="200"
                v-bind:src="
                    'https://naver.github.io/egjs-infinitegrid/assets/image/' +
                    ((item.key % 33) + 1) +
                    '.jpg'
                "
                alt="egjs" 
            />
        </a>
        </div>
    </masonry-infinite-grid>
</template>
<script>
import { MasonryInfiniteGrid } from "@egjs/vue-infinitegrid";
export default {
...
  components: { MasonryInfiniteGrid, }
  data() {
    return {
      items: [],
      status: null
    }
  },
  activated() {
    // can't catch '$refs.ig'
    this.$refs.ig.setStatus(this.status) // I want use old data in 'keepl-alive'
  },
  deactivated () {
    this.status = this.$refs.ig.getStatus();
  },
  methods: {
    getItems(nextGroupKey, count) {
        const nextItems = [];
        for (let i = 0; i < count; ++i) {
            const nextKey = nextGroupKey * count + i;
            nextItems.push({ groupKey: nextGroupKey, key: nextKey });
        }
        console.log('nextItems', nextItems)
        return nextItems;
    },
    onRequestAppend(e) {
        console.log('e', e)
        const nextGroupKey = (e.groupKey || -1) + 1;
        this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];    },
  }
}
<script>

But when I return page it has error like:

[Vue warn]: Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'setStatus')

What should I do? Please help.🤕 In fact, the ‘items’ in v-for="(item, index) in items" must use data which was stored in keepAlive. Because as requirement I have to use a button to fetch data of next page instead of ‘onRequestAppend’.

[daybrush]

@SageSanyue

Cannot read properties of undefined (reading 'setStatus') is occur when first rendering

if (this.$refs.ig && this.status) {
}

And use requestAnimationFrame

if (this.$refs.ig && this.status) {
    requestAnimationFrame(() => {
        this.$refs.ig.setStatus(this.status);
    });
}

[daybrush]

@SageSanyue

Hi. We will investigate this issue.

I think I should check a few things before that.

1. Does activation occur before mounted?
2. If keep-alive works, does mounted hook occur?
3. If mounted occurs, it would be ok to write <masonry-infinite-grid :status="status"> code.