时间戳

首页 > 解决方案 > 对象属性在vue中变空白

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

问题描述

我正在尝试在 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的逻辑房间属性不应更改。

我必须做什么才能使this.hotelRoomArr不会改变？

标签： javascriptvue.jsvuejs2vue-componentjavascript-objects

解决方案

当你这样做时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受到更改的影响

推荐阅读