Component being re-rendered even if the corresponding record is unchanged - Vue JS, Vuex ORM

109 Views Asked by At

I have an application on Vue JS that receives the data from the server via WebSocket and renders the changes. I am using Vuex ORM for defining entities in the store. The problem I am facing is that if an update is received that has changes for a record with id 1, the component that is rendered for the record with id 2 is re-rendered (which, in principle, should not because the record it is bound to has not been updated).

My component looks like this,

<UserDetail :userId="userId" :key="userId" />

Inside the component, there is a computed property that looks like this

computed: {
   User(){ // User property is attached to the UI 
    return UserEntity.find(this.userId);
   }
}

The structure of UserEntity is simple, it has five data fields and no relations to any other entity. The data in the UserEntity is added whenever there is an update on the connected WebSocket.

I tried adding a :key to the component because I read that keys control the rendering behavior of the components but that did not work.

Looking forward to any help!

0

There are 0 best solutions below