I ran into a strange issue the other day while trying to create a component that could remove keys from a queryParam Object—When the components computed the new query param, they also had an effect on the existing query param, and on each other.
Here is a twitter that demonstrates:
Clicking the first button loads an object into the “obj” queryParam. When you click the second button, it loads an instance of the “delete-key” component for each key in “obj”. Since all the component contains is a computed value equals the current param with the given key removed from it, I would expect “First” to contain “Second”, and “Second” to contain “First”—in other words, for each call of the delete-key component to display everything but its own key/values. However, as you can see, the key that the first call of the delete-key component deletes persists over to the second key, resulting in no values being displayed, despite the fact that both instances of the component ought to be displaying a computed properties, and not modifying the original value passed to them.
In my Ember.js project, I also found by putting console.log(params) into my application route’s model(params) hook, that each time a component loaded, it was removing its key from the queryParam itself—but I have no idea why this would be happening, and I was unsuccessful in reproducing it in my twiddle.
Does anyone have a good explanation for why this is behaving the way it is, rather than the way I expected it to? Am I misunderstanding something about how components ought to work, or is this some sort of bug with queryParams? Any insight would be appreciated!