I have computed the following filter:
<script>
export default {
data() {
return {
columns:{},
search:"",
trovato:{},
};
},
computed: {
searchit() {
const sear =this.search.toLowerCase().trim();
if(!sear) return this.columns;
Array.from(this.columns).forEach(element => {
element.filter((item) => {
if(item.toLowerCase().includes(sear)){
this.trovato = item;
console.log(this.trovato);
return this.trovato;
}
})
})
}
}
</script>It is functioning well, with the console outputting the correct column that matches the searched name.
The issue arises when trying to display it in a v-list. Initially, all values of the variable 'columns{}' are displayed, but after typing something, nothing appears; it's all empty. This is the code being utilized:
<v-list-item>
<v-text-field append-icon="search" v-model="search" label="Search" ></v-text-field>
</v-list-item>
<v-list v-for="(item,index) in searchit" :key="index">
<v-list-item v-for="ved in item" :key="ved.id">
<v-list-item-content>
<v-list-item-title >{{ved}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>