In my Vue application, I am trying to implement dynamic filtering for the options in a search box as the user types. Currently, the search box displays the entire list of options without any filtering happening even when the user is typing.
<el-form-item label="Filename" required>
<el-select
v-model="queryform.fileUuid"
:remote-method="getFilenames"
:loading="loading"
filterable
remote
reserve-keyword
>
<el-option
v-for="(item, idx) in filenameOptions"
:key="idx"
:label="item.filename"
:value="item.uuid"
/>
</el-select>
</el-form-item>
The objects in the filenameOptions array have the following structure:
{ "filename" : "foo", "uuid" : "bar" }
In another block of code that follows a similar logic, everything works correctly:
<el-select
v-model="form.project"
:remote-method="getProjects"
:loading="loading"
filterable
remote
reserve-keyword
>
<el-option
v-for="(item, idx) in projectOptions"
:key="idx"
:label="item.key"
:value="item.key"
/>
I'm currently facing an issue with the first block of code and I'm not sure why it's failing. Any suggestions or insights would be highly appreciated.