What is the best way to assign a property to an object that is declared in the data section of a Vue

I'm experiencing an issue when trying to assign a property to an empty object defined in the data using prototype. I keep getting an error that the object is undefined, but this error only occurs when using "prototype". What should I do?

This question pertains to [email protected], as well as [email protected] and [email protected]. The following code snippet is part of a component imported into another component.

<template>
  <input class="input" v-model="RealName" placeholder="Your Name"/>
  ...
</template>
<script>
export default {
  name: "Person",
  data() {
    return {
      Email: null,
      RealName: null,
      Ncode: null,
      City: null,
      Education: null,
      Phone: null,
      static: {}
    }
  },
  watch: {
    RealName: function(changed, lastOne){

      this.static.prototype.firstRealName = this.static.firstRealName | lastOne // -- Issue -- 

      console.log(this.static.firstRealName + ': ' + lastOne +' => ' + changed)
    }
  }
};
</script>

Whenever I try editing the input, I encounter the following error in the console: “TypeError: Cannot set property 'firstRealName' of undefined ...”

Answer №1

Rather than

let newFirstName = this.static.firstRealName | lastOne;
this.static.prototype.firstRealName = newFirstName;

try using

this.$set(this.static, "firstRealName", this.static.firstRealName | lastOne);

more information available here

Answer №2

this.static.prototype is not defined. The object static has been initialized as an empty object {}, lacking a prototype property. Hence, attempting to access

this.static.prototype.firstRealName
will not work.

this.static.prototype.firstRealName = this.static.firstRealName
            ^                                     ^
            undefined                             undefined

It is acceptable to access an undefined property of an object like this.static.firstRealName. However, trying to access a property of an undefined object such as

this.static.prototype.firstRealName
is not allowed. You cannot access the firstRealName property of an undefined object (prototype).

To resolve this issue, you must define the properties beforehand:

data() {
  return {
    Email: null,
    RealName: null,
    Ncode: null,
    City: null,
    Education: null,
    Phone: null,
    static: {
      prototype: {}  // make sure to define it in advance
    }
  };
},

Remember to be aware of the limitations related to change detection in Vue.js.

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 Babel to bring in components from directories beyond the root folder

I am working on multiple React projects within a monorepo: app1, app2, and app3. Each app is built using webpack and Babel. To share components between the apps, I decided to create a shared directory called shared within the monorepo. (I ran npm i ../sh ...

Uh oh: encountered an unexpected token 'export' in node_modulesexpoAppEntry.js

I'm encountering a challenge with my Expo project. While attempting to launch my app using yarn start, I'm running into this error: Android Bundling failed 449ms error: node_modules\expo\AppEntry.js: Unexpected token 'export&apo ...

What is the best way to ensure that the value of a <textarea> in jQuery is consistently saved and reflected in the HTML document?

I have a function on my website that allows users to input text which is then displayed on the page. However, this text disappears when the page is reloaded and does not stay permanently. How can I use jQuery to make sure that the entered text remains on ...

Utilizing JavaScript within the Spring MVC form tag

Can you please assist me with the following question? I am currently working on a project using JSP, where we are utilizing Spring form tags. My issue involves creating two radio buttons that, when clicked, will display different options and pass the sele ...

Angular.js testing for inject() function runs before the execution of a run phase code block

I am facing a situation where I need to load HTML5 Audio specifically for mobile devices, which requires user interaction like ontouchstart. To achieve this, I have implemented the necessary logic in an Angular run phase to ensure it is executed at the ear ...

Which alternative function can I use instead of onchange without having to modify the slider beforehand in order for it to function properly?

Check out my website: alainbruno.nl/form.html to see the "Race" form and the "Age" slider. I've noticed that the minimum and maximum values of the Age slider only update correctly when you first use the slider before selecting a different race. Any id ...

the angular-ui-tinymce directive allows for seamless image uploads using a file browser

Utilizing jQuery, we have the ability to incorporate local images into the tinymce editor similar to what is demonstrated in this jsfiddle, by following the guidelines provided in the documentation. The Angular module for tinymce can be found at angular-u ...

Steps for incorporating a side panel next to a component with carbon components

I'm working on a Sveltekit app and I want to create a homepage that displays a table using carbon components. The twist is, I also need to add a filter panel next to the table for data filtering. Essentially, I am aiming to achieve something similar t ...

Tips for transferring the output of a JavaScript async function to a Python variable

var = driver.execute_script("setTimeout(function(){ return [1,2,3]; }, 1000);") Utilizing the Selenium method execute_script, I am attempting to extract data from a website using javascript and assign it to a python variable var. The challenge a ...

VueJs - Highlighting a specific element within an external component

I'm currently diving into VueJs and trying to wrap my head around how everything integrates together. In essence, I have two vue files with one imported into the other. My challenge lies in focusing on an input element in the imported component withi ...

Is there a way to incorporate an Ajax response value into a timer function?

I am trying to create a countdown timer that retrieves its value from an Ajax call. Here is the code I have so far: function timer(seconds) { var days = Math.floor(seconds/24/60/60); var hoursLeft = Math.floor((seconds) - (days*86400)); ...

Determine if the current window has already been opened using JavaScript

I am exploring ways to determine if the current page is open in another tab. After attempting to use window.open(), I found that it returns the current window rather than a different window with the same address. This results in always returning true. Fo ...

Using Raycaster in ThreeJS to pick out faces from models loaded with STL Loader

I am currently developing a .stl viewer using Three.js with the objective of selecting and calculating specific areas within the model. To achieve this area calculation, I need the capability to select faces (e.g. change color). Although I came across som ...

Ensuring continuous session activity

While using the open office letter editing tool, users encounter a timeout issue where the application screen displays a timeout message. Upon initial analysis, it appears that if users are working in the open office for longer than 60 minutes, the server ...

Retrieve a PDF file from a specified URL, store it in a designated file, compress it into a zip folder,

I've been working with jszip to create and download a zip file. While I can download the pdf file separately, my goal is to have these pdf files inside the zip folder and then download the entire zip file. Here's the code snippet used to downloa ...

Learn the process of filtering an array using another array

I have a collection of items set up in the following format. items = [ { id: 1, status : "Active" // Other fields tags : [{val: 'IGM', color: 'light-success' }, {val: 'Gated Out', colo ...

Influence of Asynchronous State on the Conditional Visibility of an Element

I am encountering an issue on a screen (parent) that contains a FlatList with Child elements in the renderItem. Each Child element has a Pressable component, which should display a Checked Icon and change its background color when clicked by the user. Th ...

php generate a new file within a specific folder

In the following code snippet, a check is performed for the existence of a directory named 'dat'. If the directory does not exist, it is created. This functionality works correctly; however, the goal is to write a file to this directory that can ...

Tracing back the tainted canvas glitch in MDN's demonstration and resolving it

I am currently working my way through the Canvas tutorial on MDN. Everything was going smoothly until I reached the Pixel manipulation, specifically a color picker example. However, when using getImageData, I encountered this error: MDNTutorialBaseppp ...

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. https://i.sstatic.n ...