How to debug a value only updating after a click on another Vue related element?


I have a methods that I trigger on form submit and I use @click.prevent as I am using axios to submit the form.

In my method I have this this.ajaxLoader = true; but that value is not getting updating until I for example click on a radio button in my form. So after clicking the radio button my this.ajaxLoader is being set to ‘true’

I do not have any console errors and I am using Vue dev tools to see that the value does not change.


Can you share your code snippets.


After 2 hours I finally figured out why. I do not want to delete this post as it might be useful for others. It can seem like a silly problem but it might be useful.

As I hadn’t “used” my ajaxLoader value for anything yet it was not updating in Vue dev tools. As soon as I added {{ ajaxLoader }} in my html template it worked.