Getting error while doing Autocomplete..
-
<q-select
outlined
v-model=“country”
:options=“country_data”
:option-value=“opt => opt.id”
:option-label=“opt => opt.name”
emit-value
map-options
fill-input
use-input
@filter=“filterFn”
style=“max-width: 300px”
:rules="[val => !!val || ‘Field is required’]"
></q-select>
I have used this function:
filterFn (val, update, abort) {
update(() => {
const needle = val.toLowerCase()
this.options = this.country_data.filter(v => v.toLowerCase().indexOf(needle) > -1)
})
}
[Vue warn]: Error in v-on handler: “TypeError: v.toLowerCase is not a function”
TypeError: v.toLowerCase is not a function -
What is in
country_data
?Scott
-
There is a data fetched by API
-
And what is the data in that variable???
Scott
-
This post is deleted! -
0:
id: 1
name: “India”
I got id as 1 and name as India. -
@radhika248 on line
this.options = this.country_data.filter(v => v.toLowerCase().indexOf(needle) > -1)
, if it’s an object then you’ll have to get the key ie.this.options = this.country_data.filter(v => v.name.toLowerCase().indexOf(needle) > -1)
and i think your:options=“country_data”
props should take:options=“options”
instead. next time pls use tripple back ticks "`" for code blocks, and provide valid info, like on your last comment
@radhika248 said in Getting error while doing Autocomplete..:0:
id: 1
name: “India”
I got id as 1 and name as India.it’s not clear if your data is object or whatnot.
-
Thank you.And the issue i was facing is now solved