M
M
MarEeeeeee2020-10-02 21:20:47
Vue.js
MarEeeeeee, 2020-10-02 21:20:47

Reactivity on Vue? How to update a component?

I receive data from the server. It is required to redraw the component every time new data arrives, how to implement it? Where is the mistake? Tell me please

methods:{
      newvalue(data, whichScreen){        
         if(whichScreen){ 
           console.log("попал");
           console.log(data);         
           this.firstWindow = Object.assign({}, this.firstWindow, data);
          
         }else{          
           this.secondWindow = Object.assign({}, this.secondWindow, data);          
         }
      }
  }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander, 2020-10-02
Madzhugin @Suntechnic

It is required to redraw the component every time new data arrives, how to implement?

So something is already wrong. This shouldn't be required. The component should re-render itself based on the data when it's really needed.
this.firstWindow = Object.assign({}, this.firstWindow, data);

Are you adding an object to data? Don't do that - you lose reactivity.
Put this object in another (one level below) and do this:
methods:{
      newvalue(data, whichScreen){        
         if(whichScreen){ 
           console.log("попал");
           console.log(data);         
           Vue.set(this.windows, 'firstWindow', Object.assign({}, this.firstWindow, data));
          
         }else{          
           Vue.set(this.windows, 'secondWindow', Object.assign({}, this.secondWindow, data));          
         }
      }
  }

Accordingly, you will now have this.windows.secondWindow instead of this.secondWindow

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question