I am currently working on a table that populates based on an array of country objects, and I have added a search bar to enable live filtering through the countries array. However, as a newcomer to Vue, I am struggling to implement this feature effectively. I would greatly appreciate it if someone could take a look at my code and guide me in the right direction or identify any mistakes I may be making.
At the moment, I have set up a v-model on the text field to bind the user input to a data value called "filterBy". My current approach involves creating a filteredCountries function within computed. By my understanding, computed functions will automatically run whenever a variable inside them changes. So, I expect this function to be called every time something is typed into the search bar, consequently filtering the countries array and triggering a re-render of the table.
<template>
// Vue template code goes here
</template>
<script>
import BooleanCell from '~/components/global-components/Table/BooleanCell'
import DateCell from '~/components/global-components/Table/DateCell'
export default {
components: {
BooleanCell,
DateCell
},
props: {
headerValues: {
type: Array,
required: true
},
items: {
type: Array,
required: true
}
},
computed: {
filteredCountries() {
return this.items.filter(country => {
return country.country_name.includes(this.filterBy)
})
}
},
data() {
return {
pagination: {
sortBy: 'country_alpha2'
},
filterBy: ''
}
},
methods: {
changeSort(headerValue) {
// Method logic for changing sort order
}
}
}
</script>
Despite typing into the search bar, the table remains unchanged with the current code implementation. Can anyone assist me in identifying what I might be missing or doing incorrectly?
Please provide guidance on how to correct my approach. Thank you!