Using the scrollIntoView() method in VUE.js to center an li element within a component

One of the components I'm working with has multiple list items, and I want to achieve a functionality where clicking on any item will center it inside the component, making it visible in the center of the view.

<card-maintenance
    v-for="manutenzione in manutenzioni"
    :key="manutenzione.id"
    :name="manutenzione.nome"
    :data="manutenzione.data"
    :durata="manutenzione.durata"
    :desc="manutenzione.desc"
    :responsabile="manutenzione.responsabile"
    :machineType="manutenzione.machineType"
    :machineSubType="manutenzione.machineSubType"

 
    @click="centerItem(idex)"
  >
    
  </card-maintenance>
  
centerItem(index){
    getElementById(index).scrollIntoView({
      block: "center"
    })
  }
javascriptvue.js

Answer №1

  <maintenance-card
    v-for="maint in maintenances"
    :key="maint.id"
    :name="maint.name"
    :date="maint.date"
    :duration="maint.duration"
    :description="maint.description"
    :supervisor="maint.supervisor"
    :machineType="maint.machineType"
    :machineSubType="maint.machineSubType"
    :id="maint.id"
    @click="centerItem(maint.id)"
  >
  </maintenance-card>

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

Troubleshooting a JavaScript error while attempting to execute a function from a

I have been working on a new JavaScript library named TechX. Check out the code snippet below: (function(){ function tex(s){ return new tex.init(s); }; //initiate the init selector function tex.init = function(s ...

javascript

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

javascripthtmlrazor

Where should I register an npm installed component for VueJS and how can I do it

After using the vue create command to create a Vuejs project following the installation of npm i @vue/cli, I am now looking to incorporate this component into my project. The installation guide states: "Then, import and register the component:&quo ...

vue.jsnpmcomponentsvue-componentvuejs3

How can one generate an HTML element using a DOM "element"?

When extracting an element from an HTML page, one can utilize a DOM method like .getElementById(). This method provides a JavaScript object containing a comprehensive list of the element's properties. An example of this can be seen on a MDN documentat ...

javascripthtmldom

Start by executing the function and then proceed to upload a static file

Here is the code I am working with: var express = require('express'), app = express(); app.use(express.static(__dirname + '/static')); app.get('/', function(req, res) { //??? }); app.listen(80); I need to first ex ...

javascriptnode.jsexpress

What is the method for displaying various page views on a single URL?

For instance: Let's say I have a URL like /content/supercontenturl/. If the content type is a video (defined in my database), I will display a video player on the page along with other components. However, if the content type is text or something else ...

vue.jsroutesnuxt.js

Using Django to send AJAX POST requests to pass JavaScript variables for form initialization

Currently, I am engaged in a Django project where I have managed to gather all my variables in JavaScript and now attempting to initialize a form (within a modal popup) on the same page without any need for refresh. The form is successfully displaying insi ...

javascriptjqueryajaxdjango

Retrieving the checkbox value from a dropdown selection

I'm stuck and feeling lost here - I must be missing something obvious. Any help will be greatly appreciated! (I am a beginner in html and javascript) I have created a dropdown menu with an unordered list of items populated from JSON data. Here is the ...

javascripthtmlcheckbox

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

javascripthtmljquery

How can I use JavaScript to update the content inside HTML tags with a specific string?

I have a situation where I need to replace a string in two different ways Input: Parameters-->string, AnnotationName, input Case 1: And I should input <i>Annotaion</i> as <b>input</b> Output : { displayData: `And I should inp ...

javascriptreactjsangulartypescriptecmascript-6

The operation could not be completed with exit code 1: executing next build on Netlify platform

Having trouble deploying my Next.JS site to Netlify due to a build error. The site was working fine previously. Any suggestions on how to resolve this issue? 3:43:14 PM: - info Generating static pages (2/6) 3:43:14 PM: - info Generating static pages (4/6) ...

javascriptreactjsnext.jsdeploymentnetlify

Capturing content from an HTML node and integrating it into VueJS data

<tasks> @foreach ($task as $tasks) <task>{{ $task->name }} [{{ $task->completed }}]</task> @endforeach </tasks> This snippet shows how I display a list of tasks from the database. Here is my Vue component setu ...

phplaravelvue.js

I require fixed headers that no longer stick once reaching a specific point

I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...

javascripthtmlcss

What is the best way to establish communication between methods in a React application?

In the SelectedTopicPage component, I currently have two methods: navigateNext and render. My goal is to pass the value of topicPageNo from the navigateNext method to the render method. What is the best way to achieve this in React? When I attempt to decla ...

javascriptreactjs

Change a camelCase string to ALL_CAPS while adding underscores in JavaScript

Currently, I'm dealing with a situation where I have a list of variables stored in a file that I need to convert into all capital letters and separate them with underscores using JavaScript. The variable pattern looks something like this: AwsKey Aw ...

javascriptfunction

Releasing the mouse button after dragging successfully without the use of any libraries

I have implemented a pure CSS snap scroll feature and now I need to determine the position of an element in relation to the viewport once the user stops dragging. However, I prefer not to rely on any complex libraries as I do not require any actual movemen ...

javascriptvue.jsmouseuponmouseup

Adding a new row to a table is causing issues with jQuery

var info = [{ "pin": "015-08-0011-000-01", "arp": "015-08-0011-000-01", "tin": "342-432-423-000", "firstname": "John", "middlename": "James", "lastname": "Jones", "suffix": "", "qtr": "1st ...

javascriptjqueryhtml

Solving the challenges of creating a product index with JSON array using a combination of PHP, Javascript, and JSON

Struggling with setting up a catalog of products. ...

javascriptphpmysqlajaxjson

Should I specify each protected route in the middleware file in the matcher for NextJs 14?

Below is the middleware file I've implemented: import { NextResponse } from "next/server"; import { NextRequest } from "next/server"; import { getApiAuth } from "./app/middleware/api/auth"; const validateApi = (req: Requ ...

javascriptnext.jsmiddlewarenextjs-dynamic-routing

Transfer shader program with buffers from shadertoy to three.js

Currently, I am delving into the world of webgl and shaders to enhance my understanding and skills. My objective is to create animations for website backgrounds. I have successfully imported basic examples from shadertoy into three.js and have been experim ...

javascriptthree.jsglslwebglshader