Stop referencing object with vuejs

Question

I know that the default behaviour of a object when we create new atributes for the same instance is that it reference the old, changing the properties.

I have something like this on my vue data:

export default {
    data() {
        return {
            paragraph: {
                text: "",
                fontSize: 14,
                key: "Paragraph",
                align: "left"
            }

        }
    },
    methods: {
        addParagraph() {
            this.$set(this.paragraph, 'key', this.paragraph.key);
            this.$set(this.paragraph, 'text', this.paragraph.text);
            this.$set(this.paragraph, 'fontSize', this.paragraph.fontSize);
            this.$set(this.paragraph, 'align', this.paragraph.align);
            this.$store.commit("appendToDocument", this.paragraph)
        },
        alignment(option) {
            this.paragraph.align = option;
        }
    }

everytime i click a button the data inside the paragraph changes and i want to pas the data to vuex store to add it to a json, so i can have a tree of paragraphs, the problem is, that everttime i create a new paragrapg it changes the values of my other paragraphs created before, is there a way to change it?

Piotr Pasieka · Accepted Answer · 2017-08-07 09:52:47Z

3

@Potray answer is good. But it can be even shorter if you are using Babel with stage-3 (spread operator). Then you can copy all properties with that syntax

addParagraph() {
    this.$store.commit("appendToDocument", { ...this.paragraph })
},

answered Aug 7, 2017 at 9:52

Piotr Pasieka

2,2131 gold badge14 silver badges14 bronze badges

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

7 Comments

Filipe Costa Over a year ago

what does the ... mean?

Piotr Pasieka Over a year ago

here you find nice examples github.com/tc39/proposal-object-rest-spread/blob/master/… 3 dots operator in that case means: create new object A then copy all properties from object B and then paste add them to abject A. Basically in your case { ...this.paragraph } do exactly what @potray code. You may be familiar with spread/rest operator for arrays. it landed in ES2015. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. Spread/rest for objects is almost a standard

Filipe Costa Over a year ago

just a think, what happens to the reference, id doesn't care? i like yout solution im curious :D

Piotr Pasieka Over a year ago

value types are copied ... so there is no reference between source object and target object

Piotr Pasieka Over a year ago

but if your property in source object is an object then target and source point to same place

|

Potray · Accepted Answer · 2017-08-07 09:44:12Z

2

Try this:

 addParagraph() {
        var paragraph = {
           key: this.paragraph.key,
           text: this.paragraph.text,
           fontSize: this.paragraph.fontSize,
           align: this.paragraph.alignkey,
        }
        this.$store.commit("appendToDocument", paragraph)
    },

answered Aug 7, 2017 at 9:44

Potray

1,99817 silver badges23 bronze badges

1 Comment

Filipe Costa Over a year ago

not my favourite solution since i need to write all again, but it works :D, thank you !!

Collectives™ on Stack Overflow

Stop referencing object with vuejs

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related