vue.js中数据引用后原数据被改变

 var vm = null,
        cateNature =
            [
                {
                    "attrId": "592e95a2e820cc1813f0ba4e",
                    "isMultiple": 1,
                    "seq": 0,
                    "isEnum": 1,
                    "attrName": "热门游戏",
                    "isMustInput": 0,
                    "isShow": 1,
                    "attrValues": [
                        {
                            "seq": 0,
                            "isShow": 1,
                            "attrValueName": "英雄联盟",
                            "attrValueId": "10000"
                        },

                    ]
                },
                {
                    "attrId": "592e95a2e820cc1813f0ba4f",
                    "isMultiple": 1,
                    "seq": 1,
                    "isEnum": 1,
                    "attrName": "服务类型",
                    "isMustInput": 0,
                    "isShow": 1,
                    "attrValues": [
                        {
                            "seq": 0,
                            "isShow": 1,
                            "attrValueName": "教玩",
                            "attrValueId": "10100"
                        },

                    ]
                }
            ];
    vm = new Vue({
        el: '#demo',
        data: {
            price: [],
            type: [],
            testData: [],
            subnatrue: [],
            cateNature: cateNature,

        }
    })

就这样一个数据结构，当时做项目的时候遇见了一个问题，var了一个变量来接收改变data数据里面的cateNature数据：

var testdata = vm.cateNature;
然后操作testdata的时候原来的cateNature数据跟着变了，

后来查看vue数据绑定的时候才发现，因为最原始的的cateNature数据是一个数组或者对象，对于一个对象或者数组的时候他们等于是引用的地址是相同的所有就跟着变了；

后台继续查找资料只要把数据来回转化一下就可以的:
var testdata = JSON.parse(JSON.stringify(vm.cateNature));
这样就可以了。

var testdata = JSON.parse(JSON.stringify(vm.cateNature));

 

转载于:https://www.cnblogs.com/liAnran/p/11395618.html