[Vuejs]-Vue – axios – handling same requests

It’s because self happens to be another reference to the window object, and is available in all modules.

Let’s walk thru the steps and see why this bug is happening.

1. You load up client:/id.
2. The created method in ClientReview does ajax request, and assigns self to this.
3. The mounted method in ClientBar does ajax request, and reassigns self to this. Note that this also changed the self variable reference in ClientReview.
4. The ClientReview ajax finishes and assigns self.clientInfo = response.data;. Since self is a reference to ClientBar, and ClientBar does not declare clientInfo as a root data property, this assignment does nothing.
5. ClientBar ajax finishes and assigns self.client = response.data;, which works.
6. You route away from ClientReview.
7. You route back to ClientReview. Repeat step 2.
8. ClientReview successfully renders because ClientBar has already rendered, and does not reassign self.

The answer is to do let self = this instead of self = this.

The lesson is ALWAYS DECLARE YOUR VARIABLES with var, let or const.