How to get div in nested child component during mounted - Vue.js

Question

I have problem whit scrolling to the element while opening the page. It's like scrolling to an anchor. I'm sending div id via props to the nested child component. On mounted I call a method scrollToSection where I have logic with scrolling.

props: {
  section: String
},
mounted() {
  this.scrollToSection();
},
methods: {
  scrollToSection () {
    if (this.section != null) {
      const options = {
        force: true,
        easing: 'ease-in',
      };
      VueScrollTo.scrollTo(`#${this.section}`, 100, options);
    }
  }
}

In that point child component dosen't render the DOM and document.getElementById(this.section) return null. But in parent component I have an access to that div. Do you have any idea how to resolve that issue? Method nextTick dosen't work.

Unknown Unknown · Accepted Answer · 2019-10-06T00:27:39

Had the same problem, where I needed to access an image in a nested component, I had to wait till the image is loaded within the nested component, by adding a @load event listener that emit a loaded event to the parent, so I knew it was ready and perform my actions.

If nextTick isn't working, you can do the same, just emit a ready event on the mounted hook of the child component and when it's ready, perform the scroll.

//Child component
mounted(){
    this.$emit('ready');
}

_

//Parent component
...
<child-component @ready="scrollToSection()" />
...

Or in alternative, if you have access to the div you want to scroll to, you can use pure javascript

MyDiv.scrollIntoView({ block: "start", behavior: 'smooth' });

How to get div in nested child component during mounted - Vue.js

1 Answers