Is it more effective to utilize a filter or request fresh data when filling in a form's drop-down choices?

Utilizing an axios ajax request, I am retrieving a JSON list of tags related to a specific topic selected from a dropdown. If no topic is chosen, all tags in the database (approximately 100-200 tags) are fetched.

The process involves:

  1. User selects a topic from the dropdown menu
  2. Listening for the onChange event and passing the selected value to the API using axios get().
  3. Receiving a pre-filtered JSON array of objects from the database based on the selected topic

Each time the user changes the topic, a new call to the API/Database is triggered. An alternative method using filters has been observed but not utilized.

When creating a form, should all option values be loaded on beforeMount() and then filtered based on selection? Or is it better practice to load options only when a user makes a selection?

javascriptajaxvue.js

Answer №1

In cases where the number of tags is not expected to increase significantly, my suggestion would be to load them all at once and then simply filter them using a computed property.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to stop clients from sending an OPTION request prior to each GET?

Is there a way to deactivate the behavior of the client performing an OPTIONS request before every GET request? ...

javascriptajax

A modern CSS solution for a fixed columns and header layout in a scrollable table

How can I create a table with minimal JavaScript using modern CSS? I am aiming to include the following features: Fixed column(s) (positioning and width) Scrollable in both X and Y axes Responsive in the X axis (for non-fixed width columns). https://i. ...

javascripthtmlcsshtml-table

Creating MySQL query results in Node.js manufacturing process

I am looking to format the MySQL result in Node.js in a specific way. The desired result format should look like this: [ { "m_idx" :1 , "contents" : { "m_name" : "a", ...

javascriptnode.js

Is it possible to alter the baseURL of axios dynamically within a Vue web page?

Currently, I am utilizing axios in a Vue project alongside Spring Boot. To perform testing on both local and cloud platforms (specifically, IBM's cloud foundry). Here is how axios is being implemented in main.js: var axios = require('axios&apos ...

vue.jsaxios

Does the JavaScript Map Function Operate Asynchronously?

I've been making changes to the state element properties within a map computePiePercentages(){ var denominator = 1600 if (this.state.total < 1600){ denominator = this.state.total } return this.state.pieChartData.map((item, ...

javascriptarraysreactjs

Tips for properly formatting the sort_by parameter in Cloudinary to avoid errors

Greetings to the helpful stack overflow community, I have encountered an issue with fetching images from cloudinary via a post request. Everything works fine until I include the sort_by parameter in the URL. This results in an error related to the format ...

javascriptcloudinary

Setting a background color in Vuetify: A comprehensive guide

Currently, in my Vuetify application using the Light theme, the background of the main content is automatically set to a light grey. However, I specifically need it to be white. I've attempted to override this by adjusting the stylus variables, but I ...

vue.jsvuetify.js

Divide JSON arrays into separate select boxes

I have integrated AngularJS into certain sections of my website, rather than using it for the entire site. Currently, I am dealing with a scenario where I have a pair of select boxes, one dependent on the other. One box contains a list of countries, while ...

javascriptjsonangularjs

Does anyone have a solution for resetting the ID numbers in a flatlist after removing an item from it?

As the title suggests, I am facing an issue with the following scenario: { id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' }, { id: '4', name: &apo ...

javascriptarraysreact-nativereact-native-flatlistreact-flatlist

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

Here is a snippet of my HTML code: <body ng-controller="StoreController as store"> ........... <section ng-controller="PanelController as panel"> <ul class="nav nav-pills""> <li ng-class="{active:panel.isSe ...

javascripthtmlangularjs

Leverage the camera functionality in both native and web applications using Ionic/AngularJS and Cordova

Could you provide some guidance on how to use the Camera feature in both web and native environments? I have tried implementing it using the code snippet below, taken from ng-cordova documentation: $scope.takePicture = function() { var options ...

javascriptangularjscordovaionic-framework

The property 'innerHTML' cannot be assigned to null, as stated in Vue

I am dealing with two components that allow for editing JSON objects. Additionally, I have a button that toggles between these two components. Below is the HTML code snippet: <v-btn @click="switchConfigClicked">Switch config</v-btn> <h4 cla ...

javascripthtmlvue.jsvuejs2

Quirks and nuances when using p5's pixel fill function

I am currently utilizing the p5.js library to work on a program that is designed to automatically fill closed spaces. However, I am encountering an issue where the program sometimes fills half-closed loops for reasons unknown to me. If anyone could provide ...

javascriptp5.js

The div smoothly descended from the top of the page to the center under the control of jQuery

I am trying to implement a feature where a div slides down from the top of the page to the center when a button is clicked. However, my current code seems to be causing the div to slide from the bottom instead of the top. Ideally, I want the div to slide ...

javascriptjquerycssslideslidetoggle

Tips for concealing navigation buttons during certain stages in react stepzilla

When working with React Stepzilla, I encountered an issue where I have five steps but need to hide the next button on the first step. Following different methods provided online such as: const steps = [ {name: 'Step 1', com ...

javascriptreactjsreact-stepzilla

Struggling to set up Tailwind in NuxtJS configuration

Using the "@nuxtjs/tailwindcss": "^2.0.0" for my Nuxt App has been quite helpful. Upon installation, it generated a tailwind.config.js file. I made some modifications to the code below: module.exports = { theme: {}, variants: {}, plug ...

vue.jsnuxt.jstailwind-css

Using HtmlUnit for downloading files asynchronously

I'm attempting to download the XLS file from this specific location: (simply click on the "Export to XLS" link). However, when I execute this code snippet: page.getAnchorByText("Export to XLS").click().getWebResponse().getContentAsStream(); It end ...

ajaxdownloadhtmlunit

Establishing the primary language on a multi-language website

I am currently in the process of developing a website and I intend to offer support for both English and French languages. Up to this point, I've been following the primary solution outlined in this question: How to localize a simple HTML website pag ...

javascripthtml

Tips for obtaining response headers

Currently, I am utilizing Angular version 15.0 and retrieving a list of items from the backend (ASP.NET Core 5) with an additional item attached to the header. The GET method in the client-side service is as follows: /** GET Paged commodities from the s ...

javascriptangulartypescript

Getting the chosen option from a dropdown list mapped in ReactJS

I am working on a dropdown select option that is linked to the data of an array object called 'template_titles'. Currently, the value in the dropdown corresponds to the title in the object. My goal is to be able to extract and use the selected va ...

javascripthtmlreactjs