I’m building a Vue.js app that pulls data from an Airtable database. My current setup shows all records from the table, but I need to add filtering functionality.
The Airtable contains course information with different fields including a subject field that has values like chemistry, physics, history, etc. I want users to be able to filter and see only records that match a specific subject.
Has anyone implemented similar filtering between Vue.js and Airtable? What approach would work best for this?
I encountered a similar challenge when developing a course catalog app recently. For my solution, I opted for client-side filtering because Airtable’s API doesn’t support complex filtering very well. I created a computed property in Vue that observes the selected subject filter, which enables it to return only the relevant records. This approach worked effectively, even with a dataset of over 500 courses. You can either load all data at once or use Airtable’s filterByFormula directly in your API requests. I chose to fetch all records first for quicker filtering, but if your dataset is very large, API filtering could be more efficient. Just ensure your filter criteria are defined as reactive data properties to leverage Vue’s reactivity for seamless updates.