Search code examples
vue.jsreference-typevue-props

(in Vue) How to update props has reference types in child component without affecting main component?


I am trying to create sub components under a main component and sending props from main to sub components. I would like to have possibility if user makes changes on sub component it will not affect main component. I mean one way binding.

to see full repository https://github.com/saidakyuz/test-vue-props-wih-cypress

As a solution SubComp3 returns individual element of reference types, but I would like to have possibility to return full array or object in case I need to use it.

Can someone help me to find out a solution?


Solution

  • I found a good way copying reference objects without it's reference connection. So that main component won't be affected from changes on child component.

    Changes I made(shallow);

    from: var cObjectString=this.pObjectString

    to: var cObjectString={...this.pObjectString}

    But shallow doesn't work for array object. For that I have used deepclone as following;

    from: var cObjectArray =this.pObjectArray

    to: var cObjectArray = cloneDeep(this.pObjectArray)

    In this article you can get more information about shallow or deep clone reference types