I am currently facing an issue with my form that consists of multiple fields, each used to search through an API and display matching data in a table below. While I have successfully implemented this for one field, I now need it to work for all fields without repeating the component multiple times.
Here is a snippet of the relevant code:
<form class="uk-form-stacked">
<div>
// Code for various input and select fields
</div>
<div>
// Buttons for clearing and submitting the form
</div>
<div class="results-area"&g...
The current implementation only works for the first field (Product ID). I would like to make all fields searchable without duplicating components as shown below:
<div class="results-area">
// Result-item components for different fields
</div>
Having separate computed methods for each field seems repetitious. Is there a better way to handle this?
Additionally, I want the search functionality to trigger on button click instead of dynamically updating as the v-model changes. How can I achieve this effectively without creating numerous buttons?
Edit
I managed to optimize the computed method to avoid repetition. However, I wonder if using a switch statement would be more efficient for rendering. Any thoughts on this?
Despite the optimization, I am still struggling to implement onclick search functionality and searching by dropdown <select> values.
filteredResults: function() {
// Optimized filtering logic for all fields
},