[FIXED] When populating drop-down options in a form, it is better to use a filter or request new data?

Issue

I am performing an axios ajax request to my database for a JSON list of tags related to a topic which is selected using a dropdown. If no topic value is passed, then I get a list of every tag in the database (maybe some 100-200 tags at the moment).

The steps are:

1. User selects a topic from the downdown
2. Listen for the onChange event and pass the value selected to my API using an axios get().
3. Receive the pre-filtered list as a JSON array of objects from the database based on the value sent from topic

Obviously every time the user changes the topic, another call to the API/Database is made. I have seen (but never used) another option of filter

When designing a form, would it be better to load all the form's option values on beforeMount() and then filter them depending on what is selected? Or is waiting until the user selects an option before loading other options a better practice?

Solution

If amount of tags wouldn't grow dramatically I recommend to load them all at once and then just filter them by using a computed prop.

Answered By - Anatoly

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)