Vue's push() method is replacing existing data in the array

I'm currently facing an issue where I am transferring data from a child component, Form, to its parent component, App. The data transfer is functioning correctly, however, when attempting to add this data to the existing array within the App component, all previous elements within the array are being overwritten. As a result, the same element ends up appearing in each position.

<template>
  <Form :addPC="getPC" />
</template>

<script>
import Form from './components/Form.vue'
export default {
  name: 'App',
  components:{
    Form,
  },
  methods:{
    getPC(pc)
    {
      var PC = {}
      PC = pc
      this.PCs.push(PC)
      console.log(this.PCs)
    }
  },
  data(){
      return{
        PCs:[]
      }
    },
}
</script>

Answer №1

It seems like you are encountering a common issue where saving the same object reference in your "pcs" array causes changes to be reflected in all elements. One way to resolve this is by creating a new object using the spread operator before pushing it into the array.

getPC(pc) {
    // Create a new object using the spread operator
    const newPC = { ...pc };
    this.PCs.push(newPC);
    console.log(this.PCs);
  }

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

Locate and eliminate all occurrences of "<br />" within a webpage using jQuery

I am currently working on a project using the Cargo Collective platform and I have noticed that it automatically includes unnecessary <br /> tags in the body of my document. Is there a way to use jQuery to scan for all instances of <br /> tags ...

Highly complex regular expressions in nth-check causing inefficiencies during npm installation of react-router-dom

Feeling new and inexperienced with how to react, I attempted to execute the command "npm i react-router-dom" but it ended up stopping the download process and displaying several errors. In my search for a solution, I stumbled upon this reference to some ...

Any idea how to dynamically insert rows and columns into a table or div element?

Can anyone assist me with this task? I have successfully completed the visual process I intended to do. How can I achieve this structure using AngularJS? The data will be stored in Json format. When the "+" symbol is clicked in a certain direction, the fi ...

Angular - Implementing an Object Mapping Feature

Looking to dynamically generate parameter objects in Angular with a structure like this: [ password: {type: 'String', required: true, value: 'apassword'}, someRandomParam: {type: 'Integer', required: false, value:3} ] ...

Indicate the end of the row in JavaScript when using the match() function

What's the best way to identify the end of a row when using the match() function? I'm trying to extract "2021 JANUARY 18 MONDAY" from this page. If there is additional text after the desired string, I typically use this code: var content = UrlFe ...

Accessing the camera or photo library in React Native does not require any permissions

In my current project, I am developing an app that requires users to upload images from their photo library or camera. To access the camera functionality, I am utilizing the react-native-image-picker library without integrating react-native-permissions. ...

Display/Modify HTML form

Looking for advice on how to create an interactive HTML form that displays data and allows users to edit it by clicking 'Edit' before submitting changes. Any suggestions on how to implement this functionality? ...

How does the Rx subscribe function maintain its context without the need to explicitly pass it along

Currently, I am utilizing Rx with Angular2 and making use of the Subscribe method. What intrigues me is that the callbacks of the method are able to retain the context of the component (or class) that initiated it without needing any explicit reference pas ...

Tips for ensuring that the dynamic view updates correctly when the scope variable is modified

I am currently working on an Angular SPA where a $scope variable plays a crucial role in determining the content of a specific page. When a user clicks on a different link in the menu, parameters are passed through the URL, updating the scope variable. How ...

Adding a panel dynamically with Bootstrap incorrectly

I have been using the Collapse panel in Bootstrap and it was working perfectly when implemented statically. However, I encountered an issue when trying to add it dynamically. HTML <form> <div class="form-group" > <label for="c ...

Transferring information from offspring to parent

Greetings! I'm currently getting my feet wet with React and finding myself stuck on an issue regarding passing states. Is it possible for me to pass a child state to a parent component in order to selectively render other child components? ...

issue with logging in, token verification failed

My current project involves creating a login system with authorization, but for some reason the token is not being transferred properly. const path = require('path'); const express = require('express'); const bodyParser = require(' ...

Is the "json_encode" function dropping the '+' character when using "json.parse"?

Seeking Assistance I have a question regarding the functionality of php function json_encode and js JSON.parse. I seem to be encountering an issue where the '+' character is being dropped somewhere in the process, particularly when dealing with ...

What methods exist for creating visual representations of data from a table without relying on plotting libraries?

Is there a way to plot graphs directly from a Data Table without the need for external graph libraries like plotly or highcharts? Ideally, I am looking for a solution similar to ag-grid where the functionality comes built-in without requiring manual code ...

Preventing jQuery from loading a div if it already exists: a step-by-step guide

I've encountered an issue with a mock console on my website - every time the same input value is submitted more than once, jQuery reloads the div due to its specific id. Instead of cloning the div, I decided to append a message indicating that it alr ...

Alter the class when $dirty occurs in Angular

I've recently started working with angular js and am attempting to incorporate animations into my login page. I have created a controller that will modify the class of the input field when clicked and when blurred. app.controller("con", function($sc ...

Switch between showing excerpts and full content using Ajax Load More

Currently experimenting with the Infinite Scroll plugin, my goal is to display only excerpts initially, with the option to load the full content upon user click. The PHP code snippet: <div class="tenant"> <li<?php if (! has_post_thumbnail() ) ...

Retrieve information from each selection within the Vue.js loop

I have a set of product fields to fill (Product fields: {type:"", name:""}). A variable determines the number of products to input. For each product, a separate div is displayed with a select and an input text field. I'm looking to gather data from ea ...

ReactJS tables that can be filtered and sorted

Within my component's state, there exists an array named 'contributors'. Each element within this array is an object containing various properties. My goal is to present this data in a table format, with the added functionality of sorting an ...

Issue with ReactJS: onChange event does not function properly when value is changed using jQuery

This is the reactjs code I am working with: <input name="date" id="date" value={this.state.listManage.date} onChange={this.handleForm} type="text" /> When I manually type in the input field, the onChange function works ...