Guide to adding attributes to an object in Vue.js

In my VueJS code, I have data structured like this:

params: {
        comment: Object,
        state: "",
        deleteAppointment: false,
        appointmentId: null,
      }

I am populating this data using two functions. The first function simply assigns these lines:

  this.params.state = "BLACKLIST";
        this.params.deleteAppointment = true;
        this.params.appointmentId = this.appointmentId;

However, in the second function when I try to assign the following:

   const comment = {};
      fd.forEach(function(value, key){
        comment[key] = value;
      });

      const data = {};
      Object.keys(this.lead).map((key) => {
        if (this.lead[key] != this.orginal[key]) {
          data[key] = this.lead[key];
        }
      });

      this.params = data; // There might be an issue here as it overwrites existing properties of params
      this.params.comment = comment;

Unfortunately, when assigning data to params in the second function, the previous properties seem to disappear! I suspect that I may need to make a copy of the object or something similar. I am currently unsure of what steps to take.

Answer №1

To efficiently inherit the properties of the previous object, utilize the Spread Operator as demonstrated in the code snippet below

this.values = {...this.values, ...newData};

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

The verification feature in ASP.net and Javascript

In this scenario, I am facing a challenge. I have an ASP page containing a form and an action button. When the user clicks the button, a confirmation box (confirm) should be displayed to prompt the user. If the user clicks OK, action A should be triggered; ...

Setting up webpack-hot-middleware in your express application: A step-by-step guide

I am in the process of enabling webpack HMR in my express application. This is not a Single Page Application (SPA). On the view side, I am utilizing EJS and Vue without vue-cli, which means I have to manually set up the vue-loader for the .vue files in web ...

Unable to locate a declaration file for the module "../constants/links" in src/constants/links.js, as it implicitly defaults to type 'any'

Within my VueJS application, I have brought in some constant variables. <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator' import { MOON_HOLDINGS_LINK, TWITTER_LINK } from '../constants/links' @Comp ...

Divergent outcomes observed in various browsers when fetching XMLHttpRequest responseText

Utilizing XMLHttpRequest responseText to retrieve a server txt file and populate the contents of that file into an editable text box has been my recent task. The txt file consists of concise lines of letters separated by new lines. Users have the option to ...

The Bootstrap table remains unresponsive despite using the .table-responsive class

I have created a bootstrap table but I am facing an issue with the horizontal scroll on mobile devices. Even after adding the table-responsive class to the element with the .table class, it is not working as expected. <div class="table-responsive t ...

Utilize the sortable script for dynamically loaded items via AJAX

For the drag and drop feature on my website, I am using jQuery sortable. I have a button that displays results with items on the screen. These items can be dragged and dropped into various sections. The issue I'm facing is that if I include the sort ...

Sophisticated jQuery templates

Working with jQuery templates can be straightforward for basic data structures. <script type="jquery/x-jquery-tmpl" id="myTemplate"> <li> ${Element} </li> </script> var elements = [ { Element: "Hydrogen" }, { Element: "Oxy ...

Obtain email addresses from a Google account

I've encountered a challenge while creating a website for a client who requested the ability for users to sign up or log in using their Google and Facebook accounts. My current hurdle involves extracting the user's email address from their Google ...

Set a looser Cross-Origin Resource Policy to avoid blocking a particular resource

I am in the process of building a fullstack app using PHP, React JS, and graphQL. I attempted to deploy the app to 000webhost but encountered an error. Upon checking the network, I noticed that I received a 200 status response, however, the data is being r ...

Deleting a row from a b-table made easy

Hello, I have a question about deleting an item or row in a b-table. I attempted to delete the item by using @click.prevent="deleteCustomItem(data.data.item), but I encountered issues because I am in strict mode. Here is my table setup: <custom-item- ...

Leveraging a tool to dynamically modify the styles of the active elements based on user interactions

My goal is to enhance the flexibility of my service by enabling it to handle any input field dynamically. Currently, I find myself manually coding everything, which is becoming quite labor-intensive. Is there a way to pass the element object when the eleme ...

Link scripts can sometimes cause issues with node.js

Greetings! I have successfully created a client-side SPA using vanilla-router. However, my Node.js server sometimes encounters an error when attempting to load a linked script. Uncaught SyntaxError: Unexpected token '<' This error only oc ...

Trouble capturing an event containing a period in its name using "v-on" in Vue.js

I am currently implementing Vue.js (2.6) in conjunction with DataTables.js and I'm facing an issue trying to capture the Page change event. Within DataTables, the page change event is labeled as page.dt (similar to other DataTables events, it follows ...

Enhance your webpage with our jQuery plugin that allows you to easily make Ajax

I am currently working on developing a custom jquery plugin. One of the functions within this plugin requires an ajax-call to be made. However, I want to ensure that the function remains chainable, meaning that the ajax-call should only happen after a re ...

Tips for extracting nested data in Vue.js without redundancy

Here's a query regarding my "Avatar database" project. I am aiming to gather all tags from each avatar and compile them into a single array without any duplicates. For instance, if there are 3 avatars tagged as "red", the list in the array should onl ...

I am facing a challenge: I am unable to resolve the /upload error. How can

I came across this code on a tutorial video, but I encountered a "Cannot GET /upload" error. After researching on Google, it seems like the issue might be with the missing app.get('/upload') function. Unfortunately, I'm not sure how to tro ...

How can jQuery's .append() method be used to replace the text in a <textarea> with a random number?

Simple Explanation: I want to add random numbers to an existing element on the page without affecting it. Every time the page loads, a new random number should be added. The initial problem: While I can successfully append text within an element, I am str ...

Is it possible to use the .map() method on an array with only 3 items and add 2 additional placeholders?

I need to iterate through an array of 5 items in a specific way: list.slice(0, 5).map((i) => { return <div>{i}</div> }); However, if the array only contains 3 items, I would like to add placeholders for the remaining 2 items in my reac ...

Update the text on the button

I stumbled upon part of the solution at :jQuery change button text My quest is to find out how to toggle the button text. I attempted using the class method to switch between "show teams" and "hide teams". Simply changing the text property on button click ...

Can an image map be utilized within an <a> element?

I am attempting to implement an image map within an <a> tag. It seems to be functioning correctly in Chrome, but I am encountering issues with it not working in Internet Explorer. Is it acceptable to use an image map in an <a> tag? Below is th ...