Vue component not displaying object property

Question

Vue component not displaying object property

I am currently working on implementing a filter method in a Vue component.

Here is the filter method I am trying to use:


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
}

Upon inspecting the code above:

Despite setting the rooms property of thisHotels to an empty object, it seems that the rooms property of this.hotelRoomArr also gets modified.

Logically speaking, the rooms property of this.hotelRoomArr should not be affected by this change.

What can I do to prevent changes to this.hotelRoomArr when modifying rooms?

javascript vue.js vuejs2 vue-component javascript-objects

Answer 1

Answer №1

By assigning this.hotelRoomArr to thisHotels, thisHotels now holds a reference.

To avoid this, consider using the cloneDeep function from the lodash library:

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

import cloneDeep from 'lodash/cloneDeep';

...

var thisHotels = cloneDeep(this.hotelRoomArr);

Using cloneDeep creates a separate copy and ensures that modifications do not affect the original this.hotelRoomArr

Answer 2

By assigning this.hotelRoomArr to thisHotels, thisHotels now holds a reference.

To avoid this, consider using the cloneDeep function from the lodash library:

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

import cloneDeep from 'lodash/cloneDeep';

...

var thisHotels = cloneDeep(this.hotelRoomArr);

Using cloneDeep creates a separate copy and ensures that modifications do not affect the original this.hotelRoomArr

Answer 3

Answer №2

One possible explanation for this behavior is that by assigning thisHotels = this.hotelRoomArr;, you are essentially creating a reference to the original object.

Any changes made to thisHotels will also affect this.hotelRoomArr due to their shared reference.

If you want an independent copy of the object, you can achieve this by using JSON methods as follows:

let thisHotels = JSON.parse(JSON.stringify(this.hotelRoomArr))

Personally, I prefer using the JSON object method for making non-reference copies.

Answer 4

One possible explanation for this behavior is that by assigning thisHotels = this.hotelRoomArr;, you are essentially creating a reference to the original object.

Any changes made to thisHotels will also affect this.hotelRoomArr due to their shared reference.

If you want an independent copy of the object, you can achieve this by using JSON methods as follows:

let thisHotels = JSON.parse(JSON.stringify(this.hotelRoomArr))

Personally, I prefer using the JSON object method for making non-reference copies.

Answer 5

Answer №3

To resolve the problem, consider using the spread operator when defining the local variable thisHotels by spreading the hotelRoomArr array instead of simply assigning it.

//initial code snippet
let thisHotels = [...this.hotelRoomArr]
//additional code goes here

PS: It is recommended to use let instead of var for better scope management.

Answer 6

To resolve the problem, consider using the spread operator when defining the local variable thisHotels by spreading the hotelRoomArr array instead of simply assigning it.

//initial code snippet
let thisHotels = [...this.hotelRoomArr]
//additional code goes here

PS: It is recommended to use let instead of var for better scope management.

Vue component not displaying object property

Answer №1

Answer №2

Answer №3

Similar questions

When using MathJax on an iPhone with a device width setting, you will experience the

Stop the duplication of downloading JavaScript files

Integrating external JavaScript widgets into the web application in real-time

JavaScript mouse and touch movement events (mousemove, pointermove, touchmove) are not always accurate

Getting the response from Google Cloud Translate API using Node JS

Is there an Angular directive that can replicate a mouseenter event?

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

Attempting to follow along with a guide to create a Spring Boot Vue.js project, encountering a few errors along the way

Leveraging Techniques within Computed Attributes using stored values in Vuex

Teaching sessions along with the implementation of functions

Struggling with navigating JSON data in JavaScript and facing difficulties sorting the array

How to Implement Snap-Enabled Dragging in a Container Using jQuery UI

Pressing the Like Button triggers the transfer of a specific variable from PHP to jQuery

"Learn how to use jQuery to retrieve a specific row from an HTML table based on equality with a certain

What distinguishes {key:" "} from {key:" "}, when it comes to JSON files?

How should one go about creating and revoking a blob in React's useEffect function?

Having trouble getting an HTML form to function with Ajax and PHP?

Code not functioning properly in Internet Explorer

Unable to access the attributes of the mongoose model

Getting the most out of fonts with Webpack sass-loader