0

I'm trying to modify an element in a list in Vue.js using .filter() method. The new element comes from Pusher. I'm listening for the event and trying to update the element like this:

users.filter((obj) => { Echo.private(`user.${obj.id}`).listen('.userupdated', (e) => { return obj = e.user; // or return e.user; also doesn't work }); });

This doesn't work. Both objects are identical in terms of their structure, but the new object coming through Pusher contains the updated information.

On the other hand, when I try to modify a property, it works:

users.filter((obj) => { Echo.private(`user.${obj.id}`).listen('.userupdated', (e) => { return obj.name = e.user.name; }); });

What am I doing wrong? Is replacing an entire element like this isn't allowed?

Improve this question
12
  • I'm trying to modify an element in a list in Vue.js using .filter() method. It doesn't sound a good use case for filter. Commented Aug 13, 2019 at 21:17
  • @Psidom thanks for your comment. Can you please suggest a better way to subscribe to multiple Pusher channels? Commented Aug 13, 2019 at 21:19
  • 1
    A simple for loop should do it? Use the index to modify the original array? Commented Aug 13, 2019 at 21:21
  • 1
    obj.name works because obj by itself is a reference that points to an object, so you are modifying the underlying object by doing obj.name = e.user.name. While with obj = e.user, you are overwriting the obj variable which doesn't affect what references are stored in the original array. Commented Aug 13, 2019 at 21:24
  • 1
    @Rehmat modifying the property would work the same without the return. You are not returning to the outer function from that callback because returns don't work that way Commented Aug 13, 2019 at 21:26

1 Answer 1

Reset to default
1

According to MDN what filter does is this:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

So what you are doing is basically using Filter in the wrong way. What you should do is on an event fires iterate over the old array and update it as it goes.

My suggestion: On an event fire call a function that serves just that purpose with newer value and place to replace it on and then programmatically deal with it!

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

5 Comments

My concern is, if it is the wrong way to achieve the results, then why return obj.name = e.user.name; is working?
@Rehmat It is a kind of hack you are using there which is letting you modify the object's properties on the go but that shouldn't be that way and you are right, it is working but it is clearly not the appropriate behaviour. Object properties can be modified but it's variable reference can't much like object with const keywords, you can change it's properties but can't assign a new object
I'm upvoting the answer. Thank you! p.s. Will wait for a better answer and if I don't get a better answer, I'll mark this as accepted.
@Rehmat That's great, thanks, again, to make your code modular make a function specifically to deal with array on events. And if you are looking for better explanation of how object's properties assignment work but not the whole object's reassignment doesn't work, I think you should look up objects initialization, how it's stores and behaves, maybe see how object works after creating it with const keyword, it's the same behaviour
@Rehmat Check this out to know more about Obj behaviour: stackoverflow.com/questions/44604212/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.