Key Assignment in Vue FireStore - Potential Undefined Object Situation

My goal is to assign Firestore data, passed through props, to a reactive proxy object in Vue. However, I am encountering an error that says:

Object is possibly 'undefined'.
(property) fireStoreData: Record<string, any> | undefined

To streamline my code, I want to use a forEach loop instead of directly assigning values one by one.

props: {
    fireStoreData: Object,
}
...
setup(props){
    ...
    const pageForm: { [key: string]: any } = reactive({
        name: '',
        address: '',
        ...
    })

    onMounted(() => {
        Object.keys(pageForm).forEach(key => {
            if(key in props.fireStoreData)                  // <-- error found here
                pageForm[key] = props.fireStoreData[key]    // <-- and here
            })
        })
    })
    ...
}

Answer №1

The problem lies in the fact that the fireStoreData prop is not marked as required in your code, yet you are assuming it to be.

Here's a suggestion:

props: {
    fireStoreData: {
        required: true,
        type: Object
    }
}

If you prefer the prop to be optional, you can always check if it is defined and then add a watcher to monitor any changes.

Remember, props are subject to value changes.

// formatting will be improved on PC later

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

Utilize the client-side JavaScript file with ejs framework

Recently, I have been working on creating a website using Express and EJS. I discovered that using just one JavaScript file for all my EJS (view) files was causing issues. If I target a DOM element in one view page and it doesn't exist in another, I w ...

What is the best way to combine two JavaScript functions into a single function, especially when the selector and function to be invoked may differ?

In the provided snippet, I am using the following function callers: // del if ( maxDelivery > 0 ) { if ( maxDelivery === 1 ){ delAdressFunc( dels ); } else { for ( i = 0; i < maxDelivery; i += 1 ){ delAdressFunc( ...

javascript mysql and php clash when it comes to loading

I am encountering an issue where I cannot fetch data from my phpMyAdmin database using php code when loading the map api that utilizes javascript. Currently, only the map javascript is being loaded. I have valuable data stored in my database and any assis ...

Purge React Query Data By ID

Identify the Issue: I'm facing a challenge with invalidating my GET query to fetch a single user. I have two query keys in my request, fetch-user and id. This poses an issue when updating the user's information using a PATCH request, as the cach ...

What is the reason for being able to access `$scope` and `this` using the controller as syntax?

Creating an Angular controller with the controller as syntax: <body ng-controller="ctrl as myCtrl"> <p>Accessed via scope resolution: {{ foo }} </p> <p>Accessed via controller resolution: {{ myCtrl.foo }}</p> </body> ...

Validation with Vuelidate of a Vue form field within a BootstrapVue component is triggered by a click event

I am in the process of developing a registration form that checks if a login ID entered by the user is available on the server. This particular form is built using bootstrapvue. <b-form @submit="onSubmit" v-if="show" @reset="onReset" > & ...

Path for WebStorm file watcher's output

I'm in the process of setting up a Typescript project in WebStorm, where I want the files to be transpiled into a dist folder. This is my current project folder structure: projectroot/src/subfolder/subfolder/index.ts What I aim for is to have the f ...

JQuery not refreshing data values

function addToRewardDatabase() { var rewardValue = "98"; $.post("db/mkreward.php", { proid: getURLParameter("id") }, function(data) { rewardValue = "99"; alert(rewardValue); }); alert(rewardValue); return ...

Which is better: storing an element in a variable or selecting it every time it's needed for efficiency?

When targeting an element multiple times, which method is more efficient? Consider Example 1: var el = $("#element"); el.html("foo"); el.html("bar"); Compare it to Example 2: $("#element").html("foo"); $("#element").html("bar"); Is there a noticeable ...

Having difficulties showing live data in real-time, the Python web application is encountering an "Internal Server Error" while attempting to do so

The application is receiving real-time data (verified by using an alert), but when trying to display it on the card, an Internal Server Error occurs. The same code runs fine as an independent HTML page but not in a Flask Python web app. <!DOCTYPE ...

Utilizing Angular Firestore in Combination with Await

Upon reviewing this response, I attempted to implement async/await with a firestore call but it seems like I may be overlooking something. The aim is to fetch a collection of 'hex' documents for a hex grid using Snapshot. Initially, I had valueC ...

Is there a way to utilize a nearby directory as a dependency for a separate Typescript project?

I am working with a repository that has the following structure in typescript: . ├── common ├── project_1 └── project_2 My goal is to have the common package be used by both project_1 and project_2 as a local dependency. I am looking for ...

Changing time format from ISO time to short time in JavaScript

I am working on an ajax call that retrieves a time in the format 16:06:59, and I need to convert it to 4:06 PM. var mydate = obj[0].time; The variable mydate contains 16:06:59, but when I try to use it with var date = new Date(), it returns today's ...

How do I disable split panel on Ionic 2 login page exclusively?

I have successfully implemented the split-pane feature in my app.html file. However, I am facing an issue where the split pane is being applied to every page such as login and SignUp. Can someone please guide me on how to restrict the split pane function ...

Exploring the relationships between nested tuple types

When exploring the concept of mapped tuple types in TypeScript, the documentation provides an example: type MapToPromise<T> = { [K in keyof T]: Promise<T[K]> }; type Coordinate = [number, number] type PromiseCoordinate = MapToPromise<Coor ...

Iframe displaying a blank white screen following the adjustment of document.location twice

I am in the process of developing a web application that I intend to integrate into my Wix website. The main components of the required web application are a text screen and a button to switch between different screens/pages (html content). However, I am ...

What could be causing my Vue JS and Laravel download feature to produce corrupt files?

Currently, I'm working on a download feature that allows users to download files of all types that they have uploaded. Although the downloading feature is functioning properly - files are appearing in my downloads folder and the file type is recognize ...

Incorporating Chakra UI, what is the best way to display a modal box upon page load?

Is there a way to display a modal box when the page loads in Chakra UI? I have been searching through Chakra's documentation but couldn't find any information on this. import { useDisclosure, Modal, ModalOverlay, ModalContent, ...

Divide MUI theme into individual files

I have encountered an issue in my Next.js project. I currently have an index.ts file residing in the src/theme directory. 'use client'; // necessary for MUI to work with nextjs (SSR) import { createTheme } from '@mui/material/styles'; i ...

Change every occurrence of span class red to be a strike tag

I'm attempting to replace all span tags with the red class and their content with a strike tag. However, I've encountered an issue where it doesn't seem to be replacing the specific span tags as expected. Below is the code snippet: let s ...