CODEWITHSUNDEEP
laravelvue.jsdomcomponentsscrollto
LNFullStack
LNFullStack

Reputation: 43

Vue.js - how to scroll to a parent "ref" division from a child method?

Here I am asking for your help...I want to scroll within a page. The page is rendered by the parent component, that include some child component where the scrollTo method is defined.

I have a parent component - LandingPage.vue

<script>

import InPageAnchor from '@/Components/Navigation/Buttons/InPageAnchor.vue';

export default {

  components: {
    InPageAnchor,
  },
};
</script>

<template>
   <InPageAnchor/> <!-- is a button with the scrollTo method -->
   <div ref="scrollHere" >
   </div>
</template>

and here the child component: InPageAnchor.vue

<script>

export default {

  methods: {

      scrollTo: function () {
        
        this.$parent.$refs.scrollHere.$el.scrollIntoView({ behavior: 'smooth'}) //this.$parent.$refs.scrollHere.$el is undefined
      },
  }
}
</script>

<template>
    <button
        type = "button"
        class = "rounded-md my-1 px-2 w-1/6 bg-teal-600 hover:border-violet-700 hover:border-x-4 hover:bg-teal-700/75"
        @click = "scrollTo()">
        {{ text }}
      </button>  
</template>

There is a bit more behind the use of the child, and also the "scrollHere" is in fact given as props...

Thank you

Let me know if you want any additional details

LN

Upvotes: 0

Views: 425

Answers (0)

Related Questions