Vue + Laravel: Dependent Dropdowns - Reload Values on Change

Quick demo example from one of our internal demo projects. If the value in one dropdown changed, how to reload the values for the second dropdown?

- - - - -

[grahamkatana]

This is amazing, I follow this channel and your advise:: this Laravel framework we use it in our academics, I appreciate them all

[HydroMoonLights]

Just what i was thinking about 😍.
Great content. We could use @change/event on select to query from api(like method) also, i would love to know the best practice always.

[andremof]

watch or @change, what is the difference between one and the other?

what is the best option?

[yuniorrodriguez]

Have you considered using Typescript alongside VueJS? How many of you prefer TS and why?

[iarman]

Thanks for your great tutorial. Can you tell me how to implement this on a parent child form because user can add as many rows as he wants in child part.

[TheMessixaviniesta]

When you have a multipage site that make some ajax calls, where do you define the routes? in web.php or in api.php? What if the routes need authentication? I define them in web but I don't know if it's the right approach.

[lucagambetta]

I highly suggest to add an 'isLoading' boolean variable which when set to true disables the country SELECT and put it in a "loading..." status (the usual spinner) and when the API call is completed set it back to enabled.
Always give the user a visual feedback of what is going on to increase usability.

In template:
<select :disabled="isLoading" :class="{ 'spinner' : isLoading }">...</select>

In data:
// Our loading flag
isLoading: false;

In watcher do:
let vm = this;
this.isLoading = true:
axios
.get(...)
.then( response => {
// copy data
})
.catch( error => {
// You need to catch errors
})
.finally( () => { // This is executed once the Promise is settled and is what we want
vm.isLoading = false;
});

[CheapBurger]

Please make a full tutorial for laravel + vuejs (free or paid )
thank you very much, all your video is usefull for me

[ExpDev]

Awesome video! Can you make a video on Inertiajs with Laravel?

[jamols]

holy crap I did not even know you can create a function by casting the variable names

[raimonds.L]

Most of the times [9 out of 10] you should use computed properties and on a rare occasion it's a watcher

[tanzimibthesam]

Want Vue Laravel enterprise app course

[pratibimbakhadka]

How to make an internal api call and hide api data from user when accessed directly from browser