Vue Template ref Error: Unable to access scrollHeight property of null object

I'm currently working on creating a responsive sidebar in Vue, and I encountered an issue after refactoring my project to remove the state.js file. The problem is related to the dropdown/collapse elements, and it's throwing a 

TypeError: Cannot read properties of null (reading 'scrollHeight')
error that I'm struggling to resolve.

I've come across information stating that

this error occurs when the scrollHeight property is accessed on an undefined value. To fix this error, ensure that you only access the scrollHeight property on valid HTML elements.

However, I am using a template ref to reference the element, so I'm puzzled as to why it's not accessible. Moreover, this was working fine before I made the refactor, and I can't seem to find a way around this error.

If you have any suggestions or ideas, they would be greatly appreciated!

Cheers!

Codesandbox Build

LangDropdown.vue (both dropdowns use the same update event where the error occurs)

<!-- Your modified and unique code content here -->
javascriptcssvue.jstypeerror

Answer №1

watchEffect triggers the update function before the DOM is mounted, resulting in bodyEl still being null in this scenario.

To resolve this issue, you can utilize the watch method and invoke the update function within the onMounted lifecycle hook.

I have made updates to the code, so please review it accordingly.

Visit this link for the updated code.

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

I must add and display a tab for permissions

I am currently using the material UI tab for my project. My goal is to display the tab only when the permission is set to true. I have successfully achieved this functionality, but the issue arises when the permission is false. It results in an error that ...

javascriptreactjsmaterial-ui

How can I display the value of a radio button that has been chosen?

Would you mind sharing how to display the selected value of a radio button? I attempted it this way, but unfortunately, it did not work. You can view my code at this link. <mat-radio-group [(ngModel)]="favoriteName"> <mat-radio-button *ngFor="l ...

javascriptangularangular-forms

The container or row I placed in the middle of the page content is not anchored to the bottom like it should be for footer widgets

I'm struggling with the code I've extracted. How can I move the footer widget to the bottom of the page? On some pages, the footer displays at the bottom because there isn't much content, but on one specific page, it appears in the middle of ...

csswordpresstwitter-bootstrap

Variations in the implementation of responsive web design on laptops versus mobile devices

Looking at the css code below: @media only screen and (min-width: 0px) and (max-width: 768px) { ... } I'm curious about why, on my laptop, when I resize the browser window to exactly 768px, the css properties inside this media query are applied. ...

androidhtmlcss

What is the best way to open a browser window at a quarter of its default size?

Is there a way to open a window at 25% of its default device browser window size? I attempted the code below, which worked. However, it only accepts pixel inputs and not relative % values. This makes it non-scalable across various devices. window.resizeT ...

javascripthtmlcss

What are the steps to create a basic chrome extension that functions as a countdown clock?

I am a beginner in the world of coding and I am currently working on creating a chrome extension that serves as a timer. My goal is to include the timer within the HTML popup file, allowing users to customize the settings themselves. Do you have any advice ...

javascripthtmljsongoogle-chrome-extension

Jquery validation is ineffective when it fails to validate

I have implemented real-time jQuery validation for names. It functions correctly in real-time, however, when I attempt to submit the form, it still submits the value even after displaying an error message. Below is the code snippet for the validation: $ ...

javascriptjquery

Arrange a JSON array by searching texts initially, followed by sorting the remaining results in alphabetical order

I am looking to sort a JSON array in JavaScript based on a search text. The sorting should prioritize items that match the search text at the beginning of their value, followed by alphabetical sorting for the remaining results. Even if the search text is f ...

javascriptarraysjsonsorting

Yarn combined with Webpack fails to execute post-compilation tasks

When using yarn and running yarn prod, I encountered the following error: https://i.stack.imgur.com/2emFk.jpg It seems to be stuck at this particular part of the code: mix.then(() => { execSync(`npm run rtlcss ${__dirname}/Assets/css/admin.css ${__dir ...

javascriptnpmyarnpkg

Switch out two for loops with the find or filter method in JavaScript

In my unique approach, I am showcasing a variety of product details lists based on availability in various shops. To achieve this, I have implemented the following method. for (let i = 0; i < this.prodList.length; i++) { let setContent = false; for ...

javascriptarraysecmascript-6

Unable to load the first tab in Material-ui V3 after fetching data or when the page loads

After using Material UI version 3 scrollable-tab and fetching data to load tabs and tab container, I encountered an issue where the first tab does not automatically load on page load. It requires a click in order to see the information. I have searched on ...

javascriptreactjsmaterial-ui

Exploring the power of pagination using Django and ExtJS

Extjs offers a gridpanel with pagination functionality, but I believe that the pagination only works once all the data has been received from the server (please correct me if I am mistaken). In my situation, the total amount of data from the server is 20MB ...

javascriptajaxdjangoextjspagination

Capture JavaScript results using PHP

I'm looking for a way to save the output or result of JavaScript code. For example: <script>document.write(navigator.appVersion)</script> When it comes to PHP, I have no issues: $ip = $_SERVER['REMOTE_ADDR']; $file = "log.txt ...

phpjavascriptoutput

Unable to display shadows in Three.js

I've hit a roadblock with the shadow effect at the moment, despite trying various solutions for hours, it's still not appearing. Can anyone point out what I may have done incorrectly? Below is the code snippet for my current scene: //Setting up ...

javascriptthree.js

What is the best way to make text appear as if it is floating in Jade or HTML?

Currently, I am facing an issue with a Jade file that displays an error message when a user tries to log in with incorrect credentials. The main problem is that this error message disrupts the alignment of everything else on the page, as it is just a regul ...

javascripthtmlpug

What is the best way to incorporate a variety of colors into a single element?

Using a combination of colors in one element I'm looking for ways to incorporate multiple colors into a single element effectively. My initial attempt with the color mix function didn't work as expected, so I need new ideas and techniques on how ...

htmlcsslinear-gradients

Transferring extensive PHP variables to JavaScript

After checking out different strategies for passing data from PHP to Javascript like this and this, I have concerns about the memory and variable size limits in javascript. Currently, I am transferring large chunks of HTML from PHP to Javascript to dynami ...

javascriptphpjqueryvariablesmemory

Make a decision within Express.js to select the appropriate middleware modules based on specific conditions

In my express.js endpoint, I am dynamically selecting between middleware callbacks to execute: const middleware1 = require('./m1') const middleware2 = require('./m2') app.get('/call', async (req, res) => { if (req.code == ...

javascriptnode.jsexpressmiddleware

Error: Attempted to update user profile with an invalid function in Firebase

After creating an Avatar Chooser, I am encountering an error when selecting an image. Instead of displaying the selected image in the avatar, the error message is being displayed. How can I resolve this and ensure that the image appears in the Avatar Icon ...

javascriptreactjsfirebasefirebase-authentication

Whenever text is present, the sides of my box model, constructed using HTML5 and CSS3, are always pushed downward

When I add extra text to the body of my homepage, it causes a distortion and pushes down the sidebar and advertising boxes on the side. I'm working on this project for class and even though I've asked my teacher for help, she says the code is fin ...

javascripthtmlcss