How should i go when adding an object to an array using javascript and vue?

Question

Sorry if its a very easy question, i tried following some answers in here but i couldnt..

I want to add a NEW object to an array, based on the first one

The way i find that works is this one:

    new Vue({
    el: "#app",
    data: {
       name: '',  //name isnt inside and object
     //failedExample: {name: ''}
        array: []
    },
    methods: {
        add(){
            this.array.push({name: this.name}) // i push a key:value
          //this.array.push(failedExample) // what i wished to do
        }
    }
});

https://jsfiddle.net/myrgato/6mvx0y1a/

I understand that by using the commented array.push, i would just be adding the same reference to the object over and over, so when i change the value of failedExample.name, it will change in all positions of the array. Is there a way that this doesnt happens? Like, i add the first object, then the next one as a NEW instead of a reference?

Can you give us an example of your desired outcome?

larz
– larz

2017-07-20 15:11:26 +00:00
Commented Jul 20, 2017 at 15:11 — larz
– larz, Commented Jul 20, 2017 at 15:11

V. Sambor · Accepted Answer · 2017-07-20 15:55:54Z

6

It should work as you wanted to do with your 'failedExample'. The only wrong thing I see is that you forget the this keyword when you're pushing into array.

So try this one:

 new Vue({
    el: "#app",
    data: {
      failedExample: { name: 'test'},
      array: []
    },
    methods: {
        add(){
          this.array.push(this.failedExample);
          console.log(this.array);
        }
    }
});

Update: If you want to add a new object each time, then try to clone it so you will not have refference problems:

this.array.push(Object.assign({}, this.failedExample));

answered Jul 20, 2017 at 15:55

V. Sambor

13.4k6 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vinicius Souza Over a year ago

Perfect! Thank you very much!

Collectives™ on Stack Overflow

How should i go when adding an object to an array using javascript and vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related