javascript - vue 中对象属性变为空白

Question

我正在尝试在 Vue 组件中实现过滤器方法。

我有以下过滤方法:

    filterHotels:function(){

            var thisHotels = this.hotelRoomArr;

            console.log(this.hotelRoomArr['107572']['rooms'])

            //this outputs:

            {__ob__: Observer}
            3: (...)
            __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
            get 3: ƒ reactiveGetter()
            set 3: ƒ reactiveSetter(newVal)
            __proto__: Object


            thisHotels['107572']['rooms'] = {};

            console.log(this.hotelRoomArr['107572']['rooms']);

            //this outputs:

            {__ob__: Observer}
            __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
            __proto__: Object
    }

如上面的代码所示:

虽然我将 thisHotels 的 rooms 属性设置为空白对象，this.hotelRoomArr 的 rooms 属性也正在改变。

从逻辑上讲，this.hotelRoomArr 的rooms 属性不应更改。

我必须做什么才能使 this.hotelRoomArr 不被更改？

Answer 1

当您执行 var thisHotels = this.hotelRoomArr; 时，thisHotels 将成为引用。

尝试使用lodash函数cloneDeep:

https://lodash.com/docs/4.17.15#cloneDeep

import cloneDeep from 'lodash/cloneDeep';

...

var thisHotels = cloneDeep(this.hotelRoomArr);

这将创建一个副本并防止 this.hotelRoomArr 受到更改的影响