Vue.js: Attaching a function to a Template

I am struggling to find a way to bind my screen height to a calculated value in my code. Unfortunately, the current implementation is not working as expected. I would greatly appreciate any guidance on how to resolve this issue.

<template>
    <b-container id="notfound-container">
        <b-row align-v="center" v-bind:style="{ height : h + 'px' }">
            <b-col style="align-items:center">
                <h1>404 Error</h1>
                <p>The page you have requested does not exist.</p>
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
    export default {
        name: 'tHome',
        data () {
            return {
                h: (window.innerHeight - document.getElementById('notfound-container').getBoundingClientRect().top)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>

While the value doesn't necessarily need to be updated dynamically, I do require it to be calculated at least once. At the moment, I am encountering an error stating that "h" has not been initialized.

Answer №1

data attributes are calculated prior to the rendering of the DOM. Therefore, it is recommended to execute any calculation logic after the DOM has been fully loaded, specifically within the mounted() lifecycle hook.

data(){
    h: null
},
mounted(){
       this.h = (window.innerHeight - document.getElementById('notfound-container').getBoundingClientRect().top);
}

UPDATE:

You have the option to incorporate an event listener for window resizes directly within the mounted() hook:

data(){
    h: null
},
mounted(){
    window.addEventListener('resize', this.setHeight);
},
beforeDestroy(){
    //remove the resize listener
    window.removeEventListener('resize', this.setHeight);
},
methods:{
    setHeight(){
        this.h = (window.innerHeight - document.getElementById('notfound-container').getBoundingClientRect().top);
    }
}

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

Pause before sending each request

How can we optimize the Async Validator so that it only sends a request to JSON once, instead of every time a letter is typed in the Email form? isEmailExist(): AsyncValidatorFn { return (control: AbstractControl): Observable<any> => { ...

Using Javascript to create a new regular expression, we can now read patterns in from

I am currently working on developing a bbcode filtering solution that is compatible with both PHP and JavaScript. Primarily focusing on the JavaScript aspect at the moment, I have encountered an issue with the new RegExp constructor not recognizing pattern ...

A guide on crafting a test scenario for an AngularJS controller using the Jasmine framework

I recently created an angular module called userModule.js 'use strict'; angular.module('users', ['ngRoute','angular-growl','textAngular','ngMaterial','ngMessages','ngImgCrop', ...

Develop a game timer using CreateJS

Looking for advice on the most effective method to create a timer clock using Createjs. I've attempted to reference HTML elements with DOMElement in the past, but encountered difficulties. Essentially, I need to display a timer within a container so p ...

I am encountering an issue with a JS addition operator while working with node.js and fs library

I'm trying to modify my code so that when it adds 1 to certain numbers, the result is always double the original number. For example, adding 1 to 1 should give me 11, not 2. fs.readFile(`${dir}/warns/${mentioned.id}.txt`, 'utf8', ...

The Vue.js application appears to be functioning properly with no error messages, however

Currently, I am in the process of learning Vue. Recently, I came across a helpful tutorial that I've been trying to implement using the standard vue-cli webpack template by splitting it into single file components. Despite not encountering any errors ...

What could be causing my Vue application to not launch after executing `npm run serve`?

These past 24 hours have been a struggle for me. I recently embarked on the journey of learning Javascript, and my choice of JS framework was Vue JS. However, when I run npm run serve, my Vue JS app bombards me with numerous errors that seem to make no se ...

Can anyone provide guidance on how to trigger 3 unique functions in a specific order using JavaScript?

I've been troubleshooting this issue for quite some time, but I just can't seem to figure it out. Here's my dilemma: I have three functions - one to shrink a div, one to reload the div with new data, and one to enlarge the div - all triggere ...

What is the difference in speed between drawing on a transparent canvas and determining if a point is transparent compared to determining if a point is within a complex polygon?

I'm curious if anyone has done research on adding event support to a game engine. Specifically, I am working on incorporating pixel-perfect hover over 2D object event support into my own game engine. I am exploring different ways of achieving this eff ...

Confused about having to use window.variableName in my code and not understanding the reason

Working on a web app with JS, Angular, and Meteor that integrates the Youtube API has been quite challenging. In one of my controllers, I initialized the youtube player object in the constructor following the necessary steps outlined by the Youtube API. Ho ...

Is there a way to properly direct to an internal page while utilizing [routerLink] and setting target="_blank" without triggering a full page reload?

I'm attempting to use [routerLink] along with target="_blank" to direct to an internal page without triggering a full app reload. Currently, the page opens in a new tab, but the whole application is refreshed. Here is the HTML: <a [routerLink]=" ...

The TinyMCE editor's input box lost focus while on a popup dialog

Whenever I attempt to access the TinyMCE editor in a dialog box popup and click on "Insert link", the "Insert link" dialog box pops up but I can't type anything into the text field. I suspect that the issue may stem from having a dialog box open with ...

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

Is it possible to verify the data within a VueJS model? It seems that none of the Vue validators are effective

Hello there, It's common knowledge that using Vue-validator with most UI components can be challenging when it comes to validation. I've been utilizing Vue Material Components by @mjanys, which is a fantastic library. The author has included met ...

The synchronization between jQuery's onLoad and onDomready functions allows for seamless

When utilizing jsFiddle, I have noticed two options for initializing content using jQuery: onLoad or onDomReady. I have tested most of the scripts I've written and found no noticeable functional difference. Upon researching via Google, I discovered o ...

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...

The ajv-based middy validator does not adhere to the specified date and time format

When it comes to validation, I rely on middy as my go-to package, which is powered by ajv. Below is an example of how I set up the JSON schema: serviceDate: { type: 'string', format: 'date-time' }, The structure o ...

What are the steps to successfully host a socket.io server and an HTTP server simultaneously?

I have a situation where I have both a Socket.io server and a basic HTTP server that are working together, but the issue is that the HTTP server is trying to handle requests that should actually be handled by the Socket.io server. Below is the code snippe ...

Form submissions are not saving checkbox answers

As a beginner, I'm struggling to save the checkbox answers on the page after submission. The code below is quite lengthy (checkboxes start at 314). I have a feeling that I might be missing a piece of code, but I just can't seem to pinpoint what i ...

AngularJS initiates an XMLHttpRequest (XHR) request before each routeChange, without being dependent on the controller being used

I'm currently embarking on a new project, and for the initial phase, I want to verify if the user has an active session with the server by sending an XHR HEAD request to /api/me. My objective is to implement the following syntax $rootScope.$on("$rou ...