Update a specific array entry when index is unknown

Question

On page load I receive an array of objects from the server, which are displayed using a v-for loop.

The application is real time, so when another user updates an object in the array, I receive a pusher event which contains the updated object (this is a Laravel 5.4 broadcast event containing the updated model).

How do I then locate that object within the array to replace it with the updated version?

Example component JS

export default{
    data(){
        return {
            items: []
        }
    },

    mounted(){
       ...some code to get the array from the server

       this.items = server.response;
    },

    created() {
         Echo.private('channel-name)
           .listen('event', (event) => {

               **What do I do here with the received model to update the items array?**

            });
        });
    }
}

euvl · Accepted Answer · 2017-03-07 10:27:29Z

2

I think you should have some ID inside your item entity and then just lookup for the item with the same ID and replace it. Replacing can be done, for example, using map:

...
//assuming you have ID inside your item entity
//and your new "replacement" model is in event.item

.listen('event', (event) => {
  var newItem = event.item;

  this.items = this.items.map(item => {
   return item.ID === newItem.ID ? newItem : item;
  });
});
...

answered Mar 7, 2017 at 10:27

euvl

4,7862 gold badges29 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Over a year ago

It appears that I was overthinking it. Thanks!

Collectives™ on Stack Overflow

Update a specific array entry when index is unknown

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related