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

While troubleshooting the app, I encountered an error that says: "The property 'answers' cannot be read as it is undefined."

Discovering the property name of an object in Angular using $watch

Exploring the contrast between 'completed' and 'upcoming' in callback functions within node.js

Uncovering the Model within a controller in Ember JS

Is it necessary to alter the number of rows or columns in the table?

inputting an array of strings into the value attribute of an input element using jQuery

What is the process of transferring a file to the server side as byte code in Vue.js?

Is it possible for JavaScript to identify modifications in the HTML, like an input made with Ctrl+Shift+I?

The resolveMX function in Google Cloud Functions is encountering issues when trying to process a list of domains

Is there a way to update the href attribute within the script section in vue.js?

React Native: Struggling with Button Styling

Experiencing a 404 ERROR while attempting to submit an API POST request for a Hubspot form within a Next.js application

"Utilize TipTap with the power of your personalized name

Experiencing challenges accessing information from the useEffect hook in React

I can view the data retrieved in the console, but I am having difficulty displaying it on the screen

Tips for adjusting image and div sizes dynamically according to the window size

Utilizing ng-repeat to display a collection of Angular Highcharts charts

The function $http.get in AngularJS is providing an undefined response

Seamless side-to-side navigation

What is the most efficient way to align a localStorage variable with its corresponding page?