Vue-cli: Critical two way data binding

Created on 9 Aug 2018  路  1Comment  路  Source: vuejs/vue-cli

Version

3.0.0-rc.12

Node and OS info

Node v8.9.4, npm 5.6.0, windows 10

Steps to reproduce

    let response = [{name: 'a', value: '1'}, {name: 'b', value: '2'}, {name: 'c', value: '3'}]
    let newItem = {name: 'all', value: '0'}

    this.products = response
    this.selectProducts = response

    console.log(this.products)
    console.log(this.selectProducts)

    this.selectProducts.push(newItem)
    console.log(this.selectProducts)
    console.log(this.products)
    this.selectProducts.push(newItem)
    console.log(this.selectProducts)
    console.log(this.products)

What is expected?

When array is assigned to 2 new var, they are new instance, separated. So adding new object to one should NOT add object to the other one too. Also the same is correct about delete.

What is actually happening?

When array is assigned to 2 new var, adding new object to one var add same object to the other var too. Also the same is correct about delete.


Vuex is the same too. In code get array of object from it, assign to a local var, then try to edit, delete, push to local var, it says that store is effected too.

Most helpful comment

This is how JavaScript works and has nothing to do with Vue.

>All comments

This is how JavaScript works and has nothing to do with Vue.

Was this page helpful?
0 / 5 - 0 ratings