Cannot set property 'flipId' of undefined

[u12206050]

Not getting it to work with Gridsome. Getting the following errors:

vue-router.esm.js?8c4f:2748 [Vue warn]: Error in mounted hook: "TypeError: Cannot set property 'flipId' of undefined"

found in

---> <Flipped>
       <RouterLink>
         <Grid> at src/components/Grid.vue
           <Index> at src/pages/Index.vue
             <Flipper>

TypeError: Cannot set property 'flipId' of undefined
    at Flipper.addFlipped (vue-flip-toolkit.umd.js?0129:1946)
    at VueComponent.addFlippedElement (vue-flip-toolkit.umd.js?0129:2024)
    at VueComponent.mounted (vue-flip-toolkit.umd.js?0129:31)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4213)

[mattrothenberg]

Hi @u12206050, looks like you've marked up your component incorrectly.

The Flipped component must be inside a Flipper component, not the other way around.

[u12206050]

It is, for some reason the tree output in console is reversed going backwards.

[u12206050]

I have

<Flipper :flipKey="$router.path" stagger="gentle">
          <router-view />
</Flipper>

And then in one of the components that is loaded by a page that will be generated within the router-view I have

<div class="column-grid">
    <template v-for="item in items">
      <g-link :key="item.id" class="item" :to="item.path" :class="item.class">
        <Flipped :flipId="`${item.id}-image`" class="img-wrapper" :duration="500">
          <g-image :src="item.image" class="featured"/>
        </Flipped>
      </g-link>
    </template>
  </div>

Then on the detail page I have:

<div class="post-header" :class="[post.style.header]">
    <div class="wrapper">
      <Flipped :flipId="`${post.id}-image`" class="cover-image">
        <g-image v-if="post.image" :src="post.image" class="featured" v-scroll="onScroll"></g-image>
      </Flipped>
    </div>
  </div>

[mattrothenberg]

Interesting. Looking at the code, I think the issue here is that <router-view> isn't an actual DOM node when it gets rendered, which means that the following line of code fails (more specifically , this.$el isn't defined).

https://github.com/mattrothenberg/vue-flip-toolkit/blob/master/src/Flipper.vue#L71-L74

Can you try wrapping your <router-view> in a <div> and see if that works?

[u12206050]

Nope that did not seem to fix it, but your idea lead to me finding out that the g-image which I was trying to animate was the element not being rendered. So I wrapped it in a div which then stops the errors, but I don't get any transition affect between the two pages.

[mattrothenberg]

Without seeing your full project code, it's difficult for me to recommend any other course of action.

Pay close attention to the examples that I've included in the project, to see if you're missing something simple like an ID that doesn't match, an element that should be wrapped in a div, etc.

[u12206050]

I am starting to wonder if this actually does work for images. I don't see any examples using images in your repo, have you by any chance tested images yet? Thanks for all your help so far.

[mattrothenberg]

@u12206050 I would expect it to work with images, as it's a thin wrapper around react-flip-toolkit and they have an example with images: https://react-flip-toolkit-demos.surge.sh/guitar

If I were you, I would create a dead simple example that tweens the position of an image from the left side of the page to the right, to determine whether there's an underlying issue with respect to images.

[u12206050]

Thanks for the help, it turned out it didn't work because the image src changed from being a low res image to a higher res image. I think I'll try and load the high res image right before navigating. Thanks again.

[mattrothenberg]

@u12206050 You got it, happy to help.

Once you get things figured out, I'd welcome a PR to this repo which adds an image transition example!

[u12206050]

Yeh, it only worked in the small test, but in the site with vue-router it still doesn't want to work, your overdrive library works though.

[mattrothenberg]

@u12206050 Interesting. Can you share your code for that via a PR?