How to define/use "el" in function parameter (vue js)

Question

I am VueJS beginner, so please bear with me.

I need to code to scroll to id element when using “?” in URL. Same effect as this

But I have follow the question with fix format, because this is my assignment. They provided these 2 functions without document.getElementById(Query.query).scrollIntoView({behavior: "smooth" }); . I have completed the result by adding the above code. But I don't know how to separate into 2 functions. And I don't know how to call scrollToHere() with "el" parameter also.

scrollToHere() is not called at other place, so I have to include this function in anchor(), but I have no idea how. What is this "el" for? How do I separate the code? Any guidance would be appreciated.

<div id="scroll_here"></div>

methods: {
    anchor() {
        console.log(Query)  //query: "scroll_here"            
        document.getElementById(Query.query).scrollIntoView({behavior: "smooth" });  
    },
    scrollToHere (el) {
         // CODE HERE
    },
}

Do you have the original assignment and a minimal reproduction of what you've already done? it's pretty difficult to tell if the problem is your actual code or your understanding of the problem, the easiest is to use codesandbox and show us the actual code that's not working. There are lots of different ways to achieve what you are talking about - e.g. if you are using vue router, it has scrollTo functionality https://next.router.vuejs.org/guide/advanced/scroll-behavior.html — Thomas Kuhlmann, Apr 26 '21 at 12:56

Harshal Patil · Accepted Answer · 2021-04-26T17:26:52.227

The item el in the original answer refers to the HTMLElement which you intend to scroll to.

It is a two two process. First find the element and then scroll towards it.

// Assuming this is the html - <div id="scroll_here"></div>

// 1. Find the element using one of the two ways
const el = document.getElementById('scroll_here');

// or alternately,
const el = document.querySelector('#scroll_here');


// 2. Scroll that element into view.
el.scrollIntoView();

You can use getElementById or querySelector to get the reference of HTML element in the DOM tree.

In your case, you can get the element reference in anchor() method and pass it to scrollToHere() function like:

methods: {
  anchor() {
    // { query: "scroll_here" }
    console.log(Query);
    
    this.scrollToHere(document.getElementById(Query.query));
  },
  scrollToHere(el) {
    el.scrollIntoView({behavior: "smooth" });
  }
}

Thank you so much for the explanation, exactly what I want! I have solved and submitted the answer before you, seem like my method a bit wrong but still able to get the result. `anchor() {this.scrollToElement(Query.query);}` `scrollToHere(el) {document.getElementById(el).scrollIntoView({behavior: "smooth"});}`. Based on your explanation, I fully understand the `el` now — Evelyn, Apr 27 '21 at 01:51

How to define/use "el" in function parameter (vue js)

1 Answers1