can a computed property be delayed in its calculation?

Within the code snippet below, we can see that in the

compPropsIsBtnDigitizePolygonDisabled
function, it initially checks if the digitizePolygonInteractions variable is initialized. If it is not initialized, an error will be triggered.

During execution, when the

compPropsIsBtnDigitizePolygonDisabled
function runs, digitizePolygonInteractions has not yet been initialized. This causes the function to behave eagerly instead of lazily, resulting in the error being consistently thrown due to the uninitialized state of digitizePolygonInteractions.

I have a couple of queries regarding this issue:

  1. Is there a way to make
    compPropsIsBtnDigitizePolygonDisabled
    lazy rather than eager?
  2. How can I display the value of digitizePolygonInteractions within the error message?

Code Example:

computed: {
    compPropsIsBtnDigitizePolygonDisabled() {
        if (digitizePolygonInteractions) {
            if (isBtnDigitizePolygonClicked.value == true) {
                digitizePolygonInteractions.remove();
                return values.CONST_STRING_DIGITIZE;
            } else {
                digitizePolygonInteractions.add();
                return values.CONST_STRING_STOP_DIGITIZE;
            }
        } else {
            throw new Error('WTF.digitizePolygonInteractions is:', digitizePolygonInteractions)
        }
    },
}

Answer №1

Is there a way to make the compPropsIsBtnDigitizePolygonDisabled function lazy instead of eager?

Typically, computed properties in Vue are evaluated eagerly by default. However, you can achieve laziness by using a data property and a watcher together.

For example:

data() {
  return  {
    isComputedPropertyInitialized: false
  }
},
computed: {
  compPropsIsBtnDigitizePolygonDisabled() {
    if (!this.isComputedPropertyInitialized) {
      return;
    } else {
      // Your logic here
    }
  }
},
watch: {
  digitizePolygonInteractions(value) {
    if (!this.isComputedPropertyInitialized && value) {
      this.isComputedPropertyInitialized = true;
    }
  }
}

How can you display the value of digitizePolygonInteractions in the thrown error message?

You can append the value of digitizePolygonInteractions using the + operator in your Error function call.

throw new Error('WTF.digitizePolygonInteractions is: ' + digitizePolygonInteractions)

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

Rendering React Router server-side with client-side session information

Currently, I am working with mozilla client-sessions in conjunction with express/node. My goal is to pass my session.user to the react-router within a standard * request. Despite my efforts and attempts, I keep encountering an issue where it becomes unde ...

JavaScript code encounters a math calculator script error

Am I overlooking something in my script? Everything seems to work fine when I click the minus (-) button, but when I press the plus (+) button, the calculator malfunctions. It displays 1, 11, 21, and so on, all ending with 1... Here is my code: functi ...

What is the best way to preserve an apostrophe within a variable in JavaScript without it being replaced?

How can I send the value of NewText in its original form from .cs code using an ajax call? **var NewText ="D'souza";** $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: " ...

I'm looking to create a redirect feature using a QR code that will direct users to a specific page within my Flutter app. How

When the user scans the QR code, they will be taken to a secret internal page that can only be accessed through this specific link. I attempted to use various libraries such as , but it did not achieve the desired outcome. ...

Utilizing AngularJS to iterate over a single extensive unordered list

In my current Angular app, the JSON structure is as follows: 0: Object $$hashKey: "004" Date: "2014-04-17" Items: Array[3] 1: Object $$hashKey: "005" Date: "2014-04-18" Items: Array[3] 2: Object $$hashKey: "006" ...

The subsequent code still running even with the implementation of async/await

I'm currently facing an issue with a function that needs to resolve a promise before moving on to the next lines of code. Here is what I expect: START promise resolved line1 line2 line3 etc ... However, the problem I'm encountering is that all t ...

What steps are involved in bundling a Node project into a single file?

Recently, I've been using npm to create projects. When it comes to AMD, I find the native node require to be very convenient and effective for my needs. Currently, I rely on grunt-watchify to run my projects by specifying an entry file and an output f ...

The AngularJS API now includes the ability to store both the new and old values when saving

My goal is to enhance functionality by capturing both the old value and new value from the client side and saving them in separate tables using my API. For example, if a user changes their FirstName from 'aaa' to 'ccc' and their LastNa ...

How to retrieve the current element in AngularJS version 1.x

I have done extensive research on how to get the current element in jQuery using $(this). However, I have not been able to find a similar method in AngularJS 1.x. Here is what I have tried: angular.element(this), but it does not work as expected. Below is ...

Troubleshooting Problems with Google Maps and Javascript/JSON in Internet Explorer

Currently, I am utilizing the Google Maps API to construct a map that displays store locations in close proximity to a user-specified location. Everything is functioning properly, however, I am encountering an error in Internet Explorer that I would like t ...

What is the best way to incorporate user input and output functionality in a React Javascript application with Material UI for a seamless display?

I am trying to achieve a similar output as shown in this code http://jsfiddle.net/6vqd4vnq/ but using material ui/reactjs. Is there something missing in my setup that is preventing the content from being displayed correctly like in the provided link whic ...

Tips for selecting a checkbox with Puppeteer

I've implemented the code in this way: await page.$eval('input[name=name_check]', check => { check.checked = true; }); This code is intended for multiple checkboxes. However, I need it to work for a single checkbox only. Is there a way ...

Having trouble with res.redirect not working after the page has been rendered with data?

I have a basic forget password feature set up, where users can request a password change and receive an email with a token. Clicking the link in the email will redirect them to a page where they can input their new password. When I click on the email link ...

Exploring the Power of 2D Arrays in JavaScript

Hey there! I'm having trouble defining a 2D array in JS. Two errors are getting in my way and I can't figure out what's going wrong. i is generated by a for loop - it's defined. Even when I try replacing i with 0, the same error occurs. ...

Customizing the appearance of Jquery UI Accordion Headers

Trying to integrate the JQuery UI accordion into my JQuery UI modal dialog has been causing some alignment issues. Despite following code examples found online, such as http://jsfiddle.net/eKb8J/, I suspect that the problem lies in CSS styling. My setup i ...

create a division in the organization of the identification numbers

Is there a way to always change pages when the id changes in a foreach loop to separate the printed pages? Take a look at this code snippet: var data = [ {Id: "552", valor: "50.00", Descricao: "Fraldas", }, {Id: "552", valor: "35.00", Descrica ...

Having trouble testing a Vue component that includes a v-dialog?

I've been racking my brain trying to find a solution to testing a Vue component with a v-dialog in Vue3 using Vitest and Vuetify3. It used to work flawlessly in Vue2, but now I seem to be hitting roadblocks. Here's a simple component that showca ...

Mapping JSON data from an array with multiple properties

Here is a JSON object that I have: obj = { "api": "1.0.0", "info": { "title": "Events", "version": "v1", "description": "Set of events" }, "topics": { "cust.created.v1": { "subscribe": { ...

discord.js: Bot keeps sending duplicate embeds

I recently set up my discord bot to respond with a message when I enter a specific command, but I've run into an issue where it's sending the same embed twice. I've tried troubleshooting, but so far I haven't been able to pinpoint the c ...

Steps to gather all the images within a directory

Take a look at this demo When you click on the "next" button, new images are loaded from the internet. In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc. My question is, how can I display these image ...