Understanding the use of "el" in a function parameter in Vue Js

I am new to VueJS, so please be patient with me.

I am trying to code a function that will scroll to an element with a specific ID when a "?" is used in the URL. I want it to have the same effect as demonstrated here.

My assignment requires me to follow a particular format and use two provided functions without including

document.getElementById(Query.query).scrollIntoView({behavior: "smooth" });
. I managed to achieve the desired result by adding this code, but now I need help separating it into two functions and understanding how to call scrollToHere() with the "el" parameter as well.

The scrollToHere() function is only needed within the anchor() method, so I'm not sure how to incorporate it properly. Additionally, I'm unsure about the purpose of the "el" parameter and how to divide the code effectively. Any advice would be greatly 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
    },
}

Answer №1

The term el in the original response pertains to the HTMLElement that you wish to scroll to.

This process involves two steps. Firstly, locate the element and then proceed with scrolling towards it.

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

// 1. Find the element using either of these methods
const el = document.getElementById('scroll_here');

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


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

You can utilize getElementById or querySelector to obtain the reference of the HTML element within the DOM structure.

In your scenario, you can retrieve the element reference within the anchor() function and then pass it to the scrollToHere() function as illustrated below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Once invoked by an ajax request, the $().ready function is executed

The functionality of this code is flawless when running on its own. However, once I make an ajax call to it, the code fails to execute. I suspect that the issue lies within $().ready, but I haven't yet identified a suitable replacement. Any suggestio ...

The functionality of Angular-ui-router becomes compromised when run through gulp for minification

I have a simple angular.js application that adheres to the best practices mentioned here. angular .module('myApp', ['ui.router']); (function() { function configureRoutes($stateProvider, $urlRouterProvider) { $urlRouterPr ...

Sorting complex strings in Typescript based on the dates contained within them

How can I sort a list of 2 strings with dates inside them so that the earlier one always comes first? The date is always after the second comma. For example, const example = ["AAA,5,2020-09-17T21:14:09.0545516Z", "AAA,0,2020-09-03T20:38:08. ...

Sending an event to a component that has been rendered in Vue

I'm currently in the process of developing a custom rendered component that will execute a function when clicked on: // Creating a standard Vue component with a render function Vue.component('greeting', { methods: { sayHello(){ ...

Troubleshooting date format errors when parsing two parameters in a jQuery AJAX request

Does anyone have advice on how to make an ajax call with two parameters - number and date? I encountered the following error: Warning: date_format() expects parameter 1 to be DateTimeInterface, boolean given in... Here is the HTML code involved: <di ...

What is the best way to eliminate the margin on the <v-textarea> component in Vuetify?

My textarea seems to have a top margin that I can't get rid of. Here is my code: <v-flex d-flex xs12> <v-textarea v-model="test" outline type="text" color="primary" v-valida ...

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

I recently encountered an issue while using jQuery.load to load a new page. The content on the original page is being treated strangely in some way. Specifically, I have code on the original page that formats LaTeX commands with MathJax: <script type=" ...

By harnessing a JSON response

After sending an ajax request, the server's response is as follows: {"error":false,"success":true} The ajax code used: $.ajax({ url: '/update', type: 'post', data: $(this).serialize(), success: function(response) ...

Storing data in a text or HTML file using server-side JavaScript

Currently, I am working on a JavaScript form that involves saving user-entered variables to either a .txt file or a new webpage with the variables pre-filled in the inputs. I know that JavaScript cannot directly manipulate the user's machine, but I am ...

Zero results returned for the angularjs script

I am working on enhancing my skills in angularjs, but I am facing an issue where only the categories are being displayed and the products are not showing up. There are no error messages, so I am having trouble pinpointing where the problem lies. Here is t ...

What is the best method for extracting span text using selenium?

<p id="line1" class=""><span class="bot">Do you have a short-term memory?</span><span id="snipTextIcon" class="yellow" style="opacity: 1;"></span></p> I want to extract this text: Do you have a short-term memory? This ...

Using regular expressions in JavaScript to extract the value following a colon, without including the colon itself

I've attempted using the tool, along with a similar stackoverflow question, but I'm still unable to solve or comprehend it. I hope someone here can shed some light on what I might be missing. I've provided as detailed and step-by-step examp ...

How can we access the property object from an API using Vue.js and Vuetify's v-select component?

I've been having trouble with v-select. I have received an array of objects from a backend API and I want to display those objects in my v-select element. Here is my code: <v-select label="Expedition" :items="expeditions ...

Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Encountering an issue where the image does not display in the left box after dropping it. Here is the sequence of events: Before dragging the image: After dragging the image, it fails to display: The error reported on Chrome is as follows: GET file:/// ...

Display an image in an Angular application using a secure URL

I am trying to return an image using a blob request in Angular and display it in the HTML. I have implemented the following code: <img [src]="ImageUrl"/> This is the TypeScript code I am using: private src$ = new BehaviorSubject(this.Url); data ...

What's the purpose of clicking on the page number before accessing the information?

After successfully rendering filtered products, I encountered an issue with implementing pagination. The pagination is functional but requires clicking on a page number before it displays correctly. Even though I have included a loading state, it's no ...

Vue Mutation IndexOf returns a value of -1

Hey everyone! I'm facing a challenge with deleting a "product." Although the product is successfully removed from the database, I'm encountering an issue with removing it from the VuexStore array of products. Here's what I've tried so f ...

Having trouble with my bootstrap slider carousel - it's just not cooperating

I incorporated Bootstrap's carousel to display the various courses on my website, featuring three courses at a time before transitioning to the next set of three. However, I am encountering an issue with this setup. Please see the image below for refe ...

Request successful but receiving no response text and content length is zero

let req = new XMLHttpRequest(); req.addEventListener('load', function (data) { console.log(data) }, false); req.open("get", "/bar.txt", true); req.send(); Feeling a bit perplexed at the moment, I can't seem to figure out what's going ...

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...