Upon the completion of the page loading, the function will be called immediately after the controller has provided the

I am facing an issue where I am trying to call a computed property upon page creation, but it is giving an error stating that it cannot read the data for 'undefined'. This is because the data I require is not fully loaded yet. However, when I delay the function to run 2 seconds after the creation, it works perfectly fine.

Could someone suggest a clean way to ensure that the function runs only once the data variable is set?

<div id="app">
  <div v-for="(value, employee) in employeeFunction" :key="employee">
    @{{value}}
  </div>
</div>


<script>

var vm = 
new Vue({
  el: "#app",

  data: {

    results: [
        {//data goes here

        }
    ],

  },
  created: function(){
    this.interval = setInterval(() => this.employeeFunction(), 2000);
  },
  computed: {

    employeeFunction() {
      console.log('employee data')
      employeeResults = this.results
      console.log(employeeResults)
      return employeeResults
    },

    
  }
});
</script>

Answer №1

Swap out the created() lifecycle hook and experiment with the mounted() hook instead.

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

Every single checked value in the checkbox variable

Encountered a small hiccup. Let me explain. In my form, there are 8 checkboxes. The goal is to loop through and capture the value of each checked checkbox using a variable. However, I'm always getting the same value from the first checkbox. Here&apo ...

Syntax error triggered and caught by ajaxError

I have implemented a client-side ajax error handler using the following code: $(document).ajaxError(processAjaxError); $.getJSON('/data.json'); In the server side, I have defined a function as shown below: def get(self): self.response.he ...

Can you explain the distinction between export/import and provide/inject in Vue3?

Can you explain the difference between export/import and provide/inject in Vue3? // parent const data = provide('data', ref(0)) // child const data = inject('data') // parent export const data = ref(0) // child import { data } from & ...

Retrieving external JSON data with JavaScript

I am attempting to utilize a specific service for proxy checking. They offer an uncomplicated API that delivers JSON data. My goal is to retrieve this JSON on my own server. Despite various attempts, I consistently encounter either a CORS request issue or ...

I'm having trouble with my next.js code that is supposed to handle dynamic content and routing

Currently, I am following a YouTube tutorial to learn next.js and have encountered an issue right at the beginning. I am attempting to develop dynamic content and routing for my website using the code snippet below, but I am facing an error: import Link fr ...

Filtering an array by a search term

How do you filter an array based on a specific search term? For example, if we have an array [Tom Harry, Tom John, John Glen, Tom Harward] and we search for "Tom H," then only Tom Harry and Tom Harward should be the output. [Tom Harward, Tom Harry]; Usin ...

How do you retrieve specific colored elements from an array using jQuery (or plain JavaScript)?

I am currently in the process of creating interactive checklists. One feature I have implemented is changing the color of a header if all checkboxes associated with it are checked, as shown below: $("input[type='checkbox']").click(function(){ i ...

How can you correctly make an Ajax request using computed properties sourced from VueX Store?

Is there a way to make an AJAX call where one of the parameters is a computed State in VueX? For instance, if I use this.$axios.get('someUrl/' + accID ), with accID being a computed property from VueX (using MapState), sometimes it returns ' ...

There seems to be an issue with the functionality of chrome.storage.local.set()

Struggling with Chrome storage handling, I have reviewed the newest documentation for Chrome storage and implemented the following code snippet (found within an AJAX call success function, where info.userName is a value fetched from my backend program): ch ...

Retrieve the URL of the previously visited webpage using Javascript

Is there a way to retrieve the URL of the last visited page using JavaScript? I want to be able to track which product the user viewed most recently. I have attempted the following code: var x = document.referrer; document.getElementById("demo").innerHTML ...

Dynamic image updates in real-time

Beginning a new project and already facing a roadblock, I could really use some assistance. I have 16 (4x4) images that I am displaying on a page. $max_images = $_GET['images']; $num_images = $max_images; while (($num_images > 0) && ...

Ensure that Bootstrap 5.2 tooltips do not close when the cursor returns to the triggering element

TLDR: The tooltip flickers when moving the cursor from the tooltip back to the triggering element. I want the tooltips to open on hover and be clickable. I found a solution that works on Stack Overflow here. When you hover over an element, a tooltip appe ...

How to incorporate a particular file when showcasing a specific webpage

I'm looking to incorporate different seo.blade.php files based on the page in layouts/frontend.blade.php. @if (page == 'home') @include('partials.seo') @endif @if (page == 'about') @include('partials.seo2' ...

Is it necessary to encapsulate Factory calls within a function in my Controller file?

Typically, I call a Factory from my Angular controller directly within the controller function without creating a separate method. For instance: (function () { 'use strict'; angular.module("Dashboard") .controller("DashboardController", D ...

What is the best way to access an excel file using JavaScript and Protractor?

Is it possible to read an Excel file dynamically in JavaScript and iterate through cell values using row and column counts, without converting it into a JSON object? I have searched through several posts on Stack Overflow but have not found a solution yet. ...

A guide on how to use Javascript to take a screenshot of an entire webpage

When a user triggers a script, it injects JavaScript code into the current page to make DOM changes. After interacting with the page, the user may want to save their modifications for later viewing or editing. However, if the original page source is edited ...

Tips for writing an async function using TypeScript

I've been working with Typescript and NLP.js. However, I'm encountering an issue where the argument manager is displaying 'Parameter manager implicitly has an any type'. I attempted to use :, but it didn't solve the problem eff ...

Unlocking the power of namespaced Vuex getters in Mocha unit testing

I have been working on developing a new Vue component that utilizes a namespaced Vuex getter to retrieve a list of column names. The actual component is functioning properly and runs without any issues. During the Mocha unit testing phase, I set up a mock ...

Transition between different segments

Currently working on a sapui5 fiori app, I find myself utilizing multiple fragments based on the mode (read, create, edit). However, I am stuck on how to smoothly navigate from one fragment to another, and more importantly, how to seamlessly return to th ...

The disappearing act of the Show/Hide Button in Sencha Touch 2.3.1: what's the

I'm running into an issue with my sencha touch app. Here is the container I have defined: { xtype: 'container', text: 'SOMETHING', height: '15%', width: '15%', ...